Div que se expanda al 100% del espacio disponible

[juanito1712]

Pues eso es, me gustaria que un div se expandiese al 100% del espacio disponible y no de la capa contenedora


si le doy un ancho del 100% a texto, empuja a la capa perfil que la obilga a hacer un salto de linea, no se como podria expandirla hasta su tope sin un tamaño fijo, para que se pueda expandir

PARTE CSS

Código CSS:

.foro-post{
    border:#FF0000 solid 1px;
    clear:both;
}
.foro-post-cabecera{
    border:#00FF00 solid 1px;
    height:20px;
}
.foro-post-texto{
    border:#0000FF solid 1px;
    float:right;
}
.foro-post-perfil{
    border:#FFFF00 solid 1px;
    height:100px;
    width:90px;
    float:left;
}
.foro-post-pie{
    border:#FF00FF solid 1px;
    height:20px;
    clear:both;
}
 

PARTE HTML

Código HTML:

<div class="foro-post">
    <div class="foro-post-cabecera">cabecera
    </div>
    <div class="foro-post-perfil">perfil
    </div>
    <div class="foro-post-texto">texto
    </div>
    
    <div class="foro-post-pie">pie
    </div>
</div>
 

[BloodShadow]

Ok, antes que nada te dire que hasta ahora nunca supe como hacer eso, xq estan flotantes, si no lo estubieran fuera muy sencillo, pero no se pudiera poner un div al lado del otro :P asi que la mejor solucion que te doy es trabajar con porcentajes.

.foro-post{
border:#FF0000 solid 1px;
clear:both;
}

.foro-post-cabecera{
border:#00FF00 solid 1px;
height:20px;
}

.foro-post-texto{
border:#0000FF solid 1px;
float:left;
width: 94%;// tiene 94% por el border, al quitarle el borde podes trabajarlo al 95% para que salga exacto
}

.foro-post-perfil{
border:#FFFF00 solid 1px;
height:100px;
width:5%;
float:left;
}

.foro-post-pie{
border:#FF00FF solid 1px;
height:20px;
clear:both;
}

Código HTML:

      <div class="foro-post">
          <div class="foro-post-cabecera">cabecera</div>

          <div class="foro-post-perfil">perfil</div>

          <div class="foro-post-texto">texto</div>

          <div style="clear: both;"></div>
          <div class="foro-post-pie">pie</div>
      </div> 

Espero que te sirva de ayuda :)

[2102325]

Verifica revisando los margenes, padding, y border, recuerda que este tipo de medidas en los contenedores afectan su tamaño total, con respecto al espacio disponible en el navegador...

[juanito1712]

@BloodShadow lo que has dicho no lo habia pensado, es buena idea pero lo malo es que quiero que la capa perfil tenga un ancho fijo por mucho que se expanda o contraiga :( pero gracias de todos modos, aunque no me sirva en este caso en concreto algun dia llegará donde pretenda hacer lo que me has sugerido

@2102325 revisado, y parece que no tiene problema en eso ya que si lo encojo 50 pixeles ya supera todos los tamaños de margenes y pading y aun sigue empujando