Ver Mensaje Individual
  #4 (permalink)  
Antiguo 06/03/2012, 05:51
Avatar de cristian_cena
cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: Ocupar ancho de página

De nada, me alegra que te haya servido.
Me corrijo: donde dije "restarle la última columna" debería haber dicho "restarle el último medianil" (margen).
La 3ra solucion no es idea mía, la aprendí acá en el foro, no recuerdo el autor.

Se puede presentar el caso de que necesites colocar medianil horizontal y tengas un alto variable en las cajas flotadas (si fueran altos fijo sería sencillo de resolver). Así que lo hice agregando un pequeño script mediante el cual, detectamos el alto de la caja padre de los elementos flotados, alto al cual le restamos el medianil y lo asignamos al cpntenedor #wrap

Con medianil horizontal:
Código HTML:
Ver original
  1. <div id="wrap">
  2.     <div id="elems">
  3.         <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
  4.         <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
  5.         <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
  6.         <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
  7.         <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
  8.         <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
  9.     </div>
  10. </div>
Código CSS:
Ver original
  1. *{outline:1px solid cyan;}
  2. body{
  3.     font:16px arial;
  4. }
  5. #wrap{
  6.     overflow:hidden;
  7.     width:380px;  /* w: 390 - right*/
  8.     background:red;
  9. }
  10. #elems{
  11.     width:390px;  /* w: 130 * 3 */
  12.     overflow:hidden;
  13.     background:gray;
  14. }
  15. .el{
  16.     background:gray;
  17.     float: left;
  18.     word-wrap: break-word;
  19.     width: 100px;
  20.     padding:10px;
  21.     margin:0 10px 10px 0; /* right = 10*/
  22.     /* total width: 100 + 20 + 10 */
  23. }
Código Javascript:
Ver original
  1. /* requiere jquery */
  2. var heightElems    = $("#elems").outerHeight();
  3. var heightMedianil = 10;
  4. var heightWrap     = heightElems - heightMedianil + "px";
  5.  
  6. $("#wrap").css({"height" : heightWrap});

​Saludos

edito: Al cargar primero el css y luego el js se puede producir un efecto pestaneo en el medianil inferior, puesto que al cargar la pagina renderiza primero el html/css. lo que se puede resolver fácilmente ver.

Última edición por cristian_cena; 06/03/2012 a las 13:11 Razón: un bugcito