Buenas, estoy intentando hacer algo que creo es relativamente sencillo pero no hay manera, os explico a ver si podéis arrojar algo de luz:
Tengo un contenedor con overflow:hidden y ancho de 1100px, que contiene 2 divs. El primero es un texto Zdiv class="title"> , el cual va a ser dinámico, así que no se que ancho va a tener en cada caso. El otro div tiene una imagen de 1100px, con la idea que vaya a continuación del <div class="title"> y dependiendo del ancho de este, se oculte la parte que sobra de la imagen.
El html sería este:
Código:
<div class="contentTitle">
<div class="title">Texto del titulo</div>
<div class="titleBar"><img src="imagen.jpg"></div>
</div>
y el CSS:
Código:
.contentTitle {
max-width:1100px;
overflow:hidden;
position:relative;
}
.contentTitle .title{
color:#000;
float:left;
font-family:bold;
font-size:1.4em;
}
.contentTitle .titleBar {
float:left;
}
El problema es que al no poner anchos, la imagen del div titleBar no sale (también he probado como fondo de imagen del div, pero lógicamente, tiene el mismo problema).
También he probado a hacerlo con una ul y con displays table-row y table cell, pero pasa lo mismo.
Así que sin saber el ancho que va a tener el div title, no se como hacerlo sólo con CSS, alguna idea?????
Muchas gracias.