grid elacunza 3

con medianil interior

by cristian_cena

HTML

<div id="wrap">
    <div id="elems">
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
        <p class="el">lorem ipsum dolor amet... 1234567899876543212345</p>
    </div>
</div>

CSS

*{outline:1px solid cyan;}
body{
    font:16px arial;
}
#wrap{ 
    visibility:hidden; 
    overflow:hidden;
    width:380px;  /* w: 390 - right*/
    background:red;
}
#elems{
    width:390px;  /* w: 130 * 3 */
    overflow:hidden;
    background:gray;
}
.el{
    background:gray;
    float: left;
    word-wrap: break-word;
    width: 100px; 
    padding:10px;
    margin:0 10px 10px 0; /* right = 10*/
    /* total width: 100 + 20 + 10 */
}

JavaScript

var heightElems    = $("#elems").outerHeight();
var heightMedianil = 10;
var heightWrap     = heightElems - heightMedianil + "px";

$("#wrap").css({"height" : heightWrap, "visibility" : "visible"});

/*
Por que se produce el efecto "pestaneo"? 
porque cuando carga la pagina: primero lee el html/css y luego resta el alto desde javascript.

como hago para que no se produzca?
1 ocultamos #wrap con visibility:hidden en la hoja de estilos
2 luego, lo mostramos con visibility:visible. en el script

resultado:
primero leera el html/css (lee el alto de #elems y el ultimo medianil) pero sin mostrar el bloque
luego restaamos el medianil final al alto de #elems y lo asignamos a #wrap
como mostramos luego de que javascript haya trabajado el efecto pestaneo desaparece. 
*/