Foros del Web - Ver Mensaje Individual - duda sobre css y html, dividir pagina en 3 columnas

Bandit · #4 (**permalink**) 16/04/2013, 15:47

Aquí tienes un ejemplo:

Código HTML:

Ver original<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo</title>
  <link rel="stylesheet" href="ejemplo.css">
</head>
<body>
  <div id="contenedor"> 
    <div id="cabecera"> 
       Cabecera 01 
    </div> 
    <div id="cuerpo"> 
       <div id="lateral">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, in, dolor veritatis dicta atque sequi eos amet. Est, odio, cupiditate, voluptatibus veniam molestiae suscipit fuga nisi commodi possimus nesciunt porro!</p>
       </div>
       <div id="otrolado"> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, praesentium, reprehenderit in nobis eligendi hic quos quae nihil illum eum nesciunt ducimus fuga accusantium sed totam odio aut soluta natus?</p> 
       </div> 
       <div id="principal"> 
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa 
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa 
       </div>       
    </div> 
    <div id="pie"> 
       © 2005 DesarrolloWeb.com 
    </div> 
</div>
</body>
</html>

Código CSS:

Ver original*{margin: 0; padding: 0}
body { 
    background-color: #ebebeb; 
    font: 8pt Verdana, Arial, Helvetica, sans-serif; 
    margin: 10 0 10 0px; 
    text-align: center; 
} 
#contenedor{ 
    text-align: left; 
    margin: auto; 
    width: 770px; 
} 
#cabecera{ 
    background-color: #d0d0ff; 
    color: #333300; 
    font-size:12pt; 
    font-weight: bold; 
    padding: 3 3 3 10px; 
} 
#cuerpo{ 
    margin: 10 0 10 0px; 
} 
#lateral{ 
    background-color: #FFF; 
    width: 159px; 
    float:left; 
}  
#otrolado{ 
    background-color: #FFF;
    float: right;   
    width: 120px; 
} 
#principal{ 
    background-color: #FFF; 
    margin-left: 170px; 
    padding: 4 4 4 4px; 
    width: 460px; 
} 
#pie{ 
    background-color: #cccccc; 
    clear: both; 
    padding: 3 10 3 10px; 
    text-align:right; 
}

Espero haberte sido de ayuda.