Redimensionar un div dependiendo del contenido de otro

[Jask]

Muy buenas a todos :) Qué tal ?
Tengo un pequeño problema y no se como subsanarlo :S
Como os muestro en la imagen de abajo tengo el texto que pone Noticia 1 y una barra roja a su derecha.
El problema que tengo es que no se como puedo hacer para que cuando el texto sea más grande el otro div encoja y no salte para abajo :S es la rayada.

Aquí dejo la imagen para que lo vean bien:



Y dejo el código para que lo vean ( está mal porque estoy probando cosas ):

HTML

Código HTML:

 <div class="noticias">
                        <div class="titulo">
                        	<span class="tituloizda">Noticia 1asfasfdasf</span>
                            <div class="titulodcha">sadf </div>
                        </div>
                        <div class="texto">
                        	Texto Noticia
                        </div>
                    </div> 

CSS

Código HTML:

.tituloizda{
	float:left;
	color:#ef2b2d;
	font-size:16px;
	font-weight:bold;
}

.titulodcha{
	float:left;
	background-image:url(../images/linea.gif);
	margin:0 2px;
}

Un saludo y gracias de antemano

[cristian_cena]

Hola Jask: Si lo que buscas son columnas equilibradas aquí tienes algunos ejemplos:

http://www.araudi.net/ejemplos/colum...ilibradas.html
http://www.css.devillasbuenas.es/2columnas.html
http://matthewjamestaylor.com/blog/e...r-css-no-hacks
http://www.vectoralia.com/manual/htm...scolumnas.html

Saludos!

[Jask]

Gracias pero no es eso. Lo que busco es que cuando el texto de la noticia sea largo el div de la derecha se haga más pequeño.
Si yo, por ejemplo, cambio Noticia 1 por "La noticia del día más grande.." la línea roja hace un salto de línea y lo que busco es que se haga más pequeño pero en la misma línea.. No se si se me entiende xD Espero que si !!

[cristian_cena]

mmm ... me parece que lo que dices se resuelve con javascript. puedes subir una imagen del tipo "antes --> después" así me lo imagino?

[Jask]

Ok, lo siento por no haberlo puesto antes. Aquí dejo como lo quiero más o menos :

Yo tengo esta primera imagen y todo perfecto:



Lo que quiero es que cuando amplío el título de esta manera:



Quede tal cual está en esa imagen, pero no puede quedar así ya que queda de esta forma:



Y no se como variar un div según el contenido del otro. Por ejemplo si tengo dos divs que suman el 100% de donde están contenidos. Un div está al 40% el otro está al 60% pero cuando el primero varía al 70% que el segundo se quede en el 30% mostrando la línea roja :)
El otro problema que tengo es que necesito poner un "contenido" dentro de la caja de línea roja ya que si no no me aparece esta, hay alguna forma de hacer que no haya nada y se vea al tamaño deseado ?

Gracias :) !!

[Osdiwe]

Si no te quieres complicar mucho puedes utilizar una tabla en vez de div, así las celdas se ajustaran automáticamente al contenido.

Aunque no soy muy partidario del uso de tablas si no es para mostrar datos, puede que en un caso así esté justificado. O sino puedes seguir utilizando los div pero modificar la propiedad display en el css para que se comporte compo una celda de una tabla.

[Jask]

Iniciado por Osdiwe

Si no te quieres complicar mucho puedes utilizar una tabla en vez de div, así las celdas se ajustaran automáticamente al contenido.

Aunque no soy muy partidario del uso de tablas si no es para mostrar datos, puede que en un caso así esté justificado. O sino puedes seguir utilizando los div pero modificar la propiedad display en el css para que se comporte compo una celda de una tabla.

Estaba pensando lo de las tablas. Voy a probar aunque no me gusta mucho pero bueno si me saca del apuro, luego lo podré revisar con más calma :)
Tendría que poner los valores con tanto por ciento ?
El problema es que es para mostrar datos ya que esa parte es el título y abajo iría el contenido de la noticia (bueno no creo que le afecte a ese xD )

Un saludo y gracias :) !

[Osdiwe]

En principio, si no indicas porcentajes ni píxeles, las celdas se deberían acomodar correctamente a su contenido. Lo único que debes hacer es que la tabla ocupe el espacio total que quieres.

[Jask]

Iniciado por Osdiwe

En principio, si no indicas porcentajes ni píxeles, las celdas se deberían acomodar correctamente a su contenido. Lo único que debes hacer es que la tabla ocupe el espacio total que quieres.

Perfecto, he podido solucionarlo :)

Muchísimas gracias !!

[Caquilla23]

Y si aplicas al div el atributo "overflow: hidden"?

De esa manera, en teoría el contenido que supera al contenedor no aparece.

un saludo.

[bkolores]

sumado a tu solución... aplica width:auto;
eso toma el ancho restante al 100%... recuerda que el 100% debe ser el ancho del contenedor... te dibujo acá abajo una idea

/|anchotit||ancho imagen|/
los / tienen un ancho fijo
el |anchotit| y |ancho imagen| son autoentonces se calculan automaticamente para cubrir al 100% de los // es decir que si los // miden 250px ese sera el 100%;

espero haber ayudado