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

minombreesmm · #5 (**permalink**) 16/04/2013, 22:32

Cita:

Iniciado por Bandit

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.

Ya lo veo gracias, de hecho asi lo tenia.
pero aun tengo la duda, por que funciona asi?

mira yo entiendo que debe ser asi..

1)
lateral
centro
otrolado

en vez de

2)
lateral
otrolado
centro

mmm no entiendo como se agregan las cosas internamente.

como se supone que el "otrolado" se fue a la orilla en vez de que el centro lo haga siendo que fue el ultimo en agregarse el centro que no?