[SOLUCIONADO] Div con diferentes anchos

[Faser]

Hola a todo,
a ver si me pueden echar una mano.
Estoy montando una web para que sea lo máximo editable con una soloa línea de div.
La cuestión es que tengo 3 div montado en horizontal, con float:lef.
Está el izquierdo con anchura fija de 300px, donde va una imagen, el div central donde irá texto, y por último el div derecho también con una imagen i tamaño fijo de 300px.
El problema me viene cuando desde el gestor de administrador no subo por ejemplo la imagen derecha.
Me gustaría que el div central del texto creciera hasta ocupar todo el ancho que ha dejado la imagen.



El código css que utilizo es este:

gen3
#contenLeft .general #gen3{
float:left;

min-height: 140px!important;/*mitad de gen2*/
/*height:112px!important;mitad de gen2*/
width:469px; /*mitad de gen2*/
padding-left: 0px;
padding-right: 0px;
padding-top: 15px;
font-size: 10px;
display: block;
}

#contenLeft .general #gen3 #gen31{
position:relative !important;
float:left;
min-height: 150px !important;/*mitad de gen2*/
/*height:112px!important;mitad de gen2*/
min-width: 219px !important;
max-width: 219px;
width:auto;

padding-left: 15px;
padding-right: 0px;
padding-top: 0px;
font-size: 12px;
text-align: justify;
font-family:Arial, Helvetica, sans-serif;
}

#contenLeft .general #gen3 #gen32{
position:relative;
float:right;
min-height: 150!important;/*mitad de gen2*/
height:150px!important;/*mitad de gen2*/
width:219px; /*mitad de gen3*/
display:block;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: right;
}

[rodinzon]

intenta lo siguiente: 1. posiciona los divs con inline-block, 2. colocale 300px al primero, al segundo width de 100% asi se abrira si no esta el tercero, y al tercero no le defines ancho, para que si no va a estar ahi siempre, y a la imagen del tercer div le pones 300px, asi cuando este, ocupara ese espácio... algo asi se me ocurre, saludos.

[martinmiranda90]

Hola.
Lo que te comenta el compañero rondinzon no creo que te funcione, ya que si estableces que los divs se pongan en "inline-block" y determinas que el segundo div tenga el 100% del ancho, lo que va a hacer es desplazarse a la linea continua y coger todo el ancho del contenedor padre. Con este método puedes hacerlo: [URL]http://jsfiddle.net/f4L1kpw3/7/[/URL].
Ahora mismo la única manera que se me ocurre es tratar el div como una table con display:table y hijos como celdas (display:table-cell).
Seguramente haya más pero ahora mismo no se me ocurren. Un saludo y espero poder haberte sido de ayuda

[mbm150]

Hola,
te explico un poco como lo haría yo. Primero, el orden de los div es importante, hay que poner los tres div, primero el de la izquierda, segundo el de la derecha y tercero el del medio. Despues los tres div debes ser display: block. Al primero le pones float: left, al segundo float: right y al tercero no le pones float y le pones overflow: hidden. Y asi debe funcionar correctamente. Te dejo el ejemplo: http://jsfiddle.net/mbm150/hj99y0es/

Para que funcione bien, en el div de la derecha, o le pones display:none cuando no este, o no le pones width y se la pones a la imagen interior (tampoco padding), asi cuando no hay imagen su width es 0 y se oculta.

Saludos.

[Faser]

Muchas gracias por las respuestas.
Me ha solucionado mucho las distintas respuestas.
Finalmente la solución final me la diste tu mbm150. Con este método puedo esconder la imagen tanto de la derecha como la de la izquierda (eso si, poniendo el ancho en la imagen y no el css), y el texto central se escala a lo ancho de los limites del content.
Gracias por todo.

Os dejo el código por si a alguien le pueda interesar

Código HTML:

<style>
#content{
    width: 100%;
    display: block;
}
#content div{
    display: block;
    padding: 0;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
}
#content div:nth-child(1){
    float: left;
    padding:0px;
}
#content div:nth-child(2){
    float: right;
    padding:0px;
    
}
#content div:nth-child(3){
    overflow: hidden;
}
 
</style>
 
 
<div id="content">
    <div><img src="resources/0a4eb2a698ad818ef40e61832.jpg" alt="Mercados de actuación" width="219" height="310" align="left" />
    </div>
    <div><img src="resources/0a4eb2a698ad818ef40e61832.jpg" alt="Mercados de actuación" width="219" height="150" align="left" />
    </div>
    <div>El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3. El 3.
    </div>
</div>
 

[GekoDH]

Una dudilla que me acaba de surgir a mí viendo esa solución, la propiedad overflow:hidden se supone que no sirve para eso si no para ocultar el contenido que no cabe dentro del div, ¿por qué en este caso actúa de esta forma tan poco intuitiva?