Foros del Web » Creando para Internet » CSS »

Div que se expanda al 100% del espacio disponible

Estas en el tema de Div que se expanda al 100% del espacio disponible en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/05/2010, 08:56
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.108
Antigüedad: 7 años, 7 meses
Puntos: 66
Div que se expanda al 100% del espacio disponible

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:
Ver original
  1. .foro-post{
  2.     border:#FF0000 solid 1px;
  3.     clear:both;
  4. }
  5. .foro-post-cabecera{
  6.     border:#00FF00 solid 1px;
  7.     height:20px;
  8. }
  9. .foro-post-texto{
  10.     border:#0000FF solid 1px;
  11.     float:right;
  12. }
  13. .foro-post-perfil{
  14.     border:#FFFF00 solid 1px;
  15.     height:100px;
  16.     width:90px;
  17.     float:left;
  18. }
  19. .foro-post-pie{
  20.     border:#FF00FF solid 1px;
  21.     height:20px;
  22.     clear:both;
  23. }

PARTE HTML
Código HTML:
Ver original
  1. <div class="foro-post">
  2.     <div class="foro-post-cabecera">cabecera
  3.     </div>
  4.     <div class="foro-post-perfil">perfil
  5.     </div>
  6.     <div class="foro-post-texto">texto
  7.     </div>
  8.    
  9.     <div class="foro-post-pie">pie
  10.     </div>
  11. </div>
  #2 (permalink)  
Antiguo 11/05/2010, 12:03
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Div que se expanda al 100% del espacio disponible

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 :)
  #3 (permalink)  
Antiguo 12/05/2010, 15:05
Avatar de 2102325  
Fecha de Ingreso: octubre-2009
Ubicación: Santo Domingo RD
Mensajes: 75
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Div que se expanda al 100% del espacio disponible

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...
__________________
Lo QuE SaBeMoS eS UnA gOta dE aGuA, Lo QuE iGnOraMos, eS El OcEaNo...
Saludos desde RD
  #4 (permalink)  
Antiguo 13/05/2010, 02:11
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.108
Antigüedad: 7 años, 7 meses
Puntos: 66
Respuesta: Div que se expanda al 100% del espacio disponible

@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

Etiquetas: disponible, espacio
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:36.