Foros del Web - Ver Mensaje Individual - Formulario de gran tamaño y altura de Div

C2am · #9 (**permalink**) 29/01/2013, 18:02

Una forma, considerando columnas equilibradas en la parte central de la web (altura contendor 3 = altura barlat) podría ser:
http://jsfiddle.net/c2am/B38GR/embedded/result/

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Maqueta html5</title>
 
</head>
 
<body>
    <div id="contenedor">
        <header>
            <h1>titulo y logo pagina</h1>
        </header>
        <nav id="menu">
            <ul>
                <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
            </ul>
            
        </nav>
        
        <div id="central">
            <section id="contenido">
                <article>
                    primer articulo<br/>
                    uso display:table-cell para lograr que la altura de esta seccion sea igual al lateral
                </article>
                <article>primer articulo<br/></article>
                <article>2 articulo<br/></article>
                <article>3 articulo<br/></article>
                <article>4 articulo<br/></article>
                <article>5 articulo<br/></article>
                <article>6 articulo<br/></article>
                <article>7 articulo<br/></article>
                <article>8 articulo<br/></article>
                <article>9 articulo<br/></article>
                <article>10 articulo<br/></article>
                <article>11 articulo<br/></article>
                <article>... articulo<br/></article>
                <article>... articulo<br/></article>
                <article>... articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <h2>display:table-cell no es soportado por IE7 y anteriores</h2>
 
        
    
            </section>
            <aside id="lateral">
                lateral<br/>
                uso display:table-cell para lograr que la altura de este lateral sea igual a la seccion contenido
            </aside>
        </div>
        
        <footer>
            pie de página
            <br/>
            Maquetado con etiquetas HTML5
            
        </footer>
        
    </div>
</body>
</html>

siendo el css básico:

Código CSS:

Ver original* {margin:0; padding:0;  outline: 0;}
a {outline:none; text-decoration:none;}
 
a img{border:0;}
ul {list-style:none}
 
#contenedor{
    margin:0 auto;
    width:960px;
    }
header, nav, aside{
    display:block;
    }
header{
    background:#a2a2f7;
    padding:10px;
    }
nav{
    background:#A2E4F7;
    padding:10px;
    }
    
    
#central{
    display:table;
    background:#FF9;
    padding:10px;
    width:100%;
    }   
    
#contenido{
    background:#FDEC76;
    display:table-cell;
    padding:10px;
    width:79%;
    }
#lateral{
    background:#B1B1B4;
    display:table-cell;
    padding:10px;
    width:19%;
    }
footer{
    background:#666;
    padding:10px;
    }
    
    
#menu ul{
    list-style-type: none;
    width:100%;
    }
#menu ul li{
    display:inline-block;
    width:150px;
    }

Considera que lo de las columnas equilibradas lo puedes lograr de otras formas, solo es ponerse a investigar un poco y optar por la que consideres mejor.
La que utilizo tiene la desventaja que no es compatible con IE7 - IE6, aunque estos navegadores ya no tienen el uso masivo de tiempo atrás.

Saludos