duda sobre css y html, dividir pagina en 3 columnas

[minombreesmm]

http://www.desarrolloweb.com/articulos/2160.php

en el ejemplo.. es algo similar a lo que estaba haciendo, pero no me salia hasta que consulte mejor..
y por alguna extraña razon es la unica forma de que quede bien..

el enfoque son 3 columnas

izquierda, central y derecha.

el orden de los divs segun yo es.

Código HTML:

<div id="lateal">(izquierdo)
con float left 
</div>
<div id="central">
con float left y margen left  de 100px para que se vaya al centro
</div>
<div id="otrolado">("derecho")
con float right para que se acomode hasta la orilla
</div>
 

eso me acarrea el problema de que al darle height al central.. el otrolado se va hacia abajo segun el height del central
osea

central height 100px;
otrolado y=100px";

se baja.





en cambio si acomodo las cosas asi.
ancho de pantalla supongamos 300px y que cada div mide de ancho 100px;
<div id="lateal">

Código HTML:

</div>
<div id="otrolado">
 
</div>
<div id="central">
 
</div>
 

todo funciona bien mmmm
no lo entiendo. alguien podría explicarme. jugue demasiado con el css. y la solucion fue html oO.



incluso encontré este ejemplo con mi misma solusion.

Código HTML:

<div id="contenedor"> 
    <div id="cabecera"> 
       Cabecera 01 
    </div> 
    <div id="cuerpo"> 
       <div id="lateral"> 
          <ul> 
             <li><a href="#">Enlace 1</a> 
             <li><a href="#">Vínculo 2</a> 
             <li><a href="#">Otro enlace</a> 
             <li><a href="#">Link chulo</a> 
             <li><a href="#">Más enlaces</a> 
             <li><a href="#">Otro último</a> 
          </ul> 
       </div> 
       <div id="otrolado"> 
          <img src="bannerlateral.gif" width="120" height="600" alt=""> 
       </div> 
       <div id="principal"> 
          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>
 

Código CSS:

BODY { 
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; 
    margin: 10 0 10 0px; 
    text-align: center; 
    background-color: #ebebeb; 
} 
#contenedor{ 
    text-align: left; 
    width: 770px; 
    margin: auto; 
} 
#cabecera{ 
    background-color: #d0d0ff; 
    color: #333300; 
    font-size:12pt; 
    font-weight: bold; 
    padding: 3 3 3 10px; 
} 
#cuerpo{ 
    margin: 10 0 10 0px; 
} 
#lateral{ 
    width: 160px; 
    background-color: #999999; 
    float:left; 
} 
#lateral ul{ 
    margin : 0 0 0 0px; 
    padding: 0 0 0 0px; 
    list-style: none; 
} 
#lateral li{ 
    background-color: #ffffcc; 
    margin: 2 2 2 2px; 
    padding: 2 2 2 2px; 
    font-weight: bold; 
} 
#lateral a{ 
    color: #3333cc; 
    text-decoration: none; 
} 
#otrolado{ 
    width: 120px; 
    float: right;   
} 
#principal{ 
    margin-left: 170px; 
    background-color: #ffffff; 
    padding: 4 4 4 4px; 
    width: 460px; 
} 
#pie{ 
    background-color: #cccccc; 
    padding: 3 10 3 10px; 
    text-align:right; 
    clear: both; 
}
 

la otra cosa es que cuando lleno de divs el div central, cuando el alto de los divs internos sobrepasa el de el div contenedor, el div contenedor no se hace alto automaticamente. alguien sabe que propiedad es?
los divs internos que meto y crecen tiene position absolute..
de antemano gracias

[Bandit]

Hola minombreesmm:
La razón de que no quepan las 3 columnas dentro de su contenedor es que la suma de sus anchos más los márgenes exceda al ancho del contenedor.

Espero haberte sido de ayuda.

[minombreesmm]

Iniciado por Bandit

Hola minombreesmm:
La razón de que no quepan las 3 columnas dentro de su contenedor es que la suma de sus anchos más los márgenes exceda al ancho del contenedor.

Espero haberte sido de ayuda.

bueno de hecho no he probado el ejemplo.
mas que lo que explique arriba.
gracias.
por cierto
tambien decia que si tengo un div contenedor sin altura ni ancho fijo.

y que a la hora de agregarle dos divs de 100x100 el div contenedor
en el cual agrego los divs de 100 se queda del mismo tamaño..
aunque esten internos

Código CSS:

#inter{
height:100px;
width:100px;
}
 

Código HTML:

<div id="contenedor"> 
<div id = "inter">
</div>
<div id = "inter">
</div>
</div>
 

[Bandit]

Aquí tienes un ejemplo:

Código HTML:

<!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:

*{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.

[minombreesmm]

Iniciado por Bandit

Aquí tienes un ejemplo:

Código HTML:

<!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:

*{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?

[Bandit]

otrolado se va a la derecha por el float: right;
Para que todos los div se alineen horizontalmente a cada uno de ellos ponle: float: left;
En el HTML coloca en ése orden los Div: lateral, principal y otrolado.

Espero haberte sido de ayuda.

[minombreesmm]

Iniciado por Bandit

otrolado se va a la derecha por el float: right;
Para que todos los div se alineen horizontalmente a cada uno de ellos ponle: float: left;
En el HTML coloca en ése orden los Div: lateral, principal y otrolado.

Espero haberte sido de ayuda.

pues eso fue lo que hice

lateral y principal el left
y el otro lado right

eso fue en el css

pero


en el html
tubo que ser asi

lateral
otrolado
principal


en vez de:

lateral
principal
otrolado


en que forma se supone que se alinean los divs?

[pzin]

Te han dicho que flotaras todos hacia la izquierda. Cosa que dices que no haces.

Iniciado por Bandit

Para que todos los div se alineen horizontalmente a cada uno de ellos ponle: float: left;

[minombreesmm]

Iniciado por pzin

Te han dicho que flotaras todos hacia la izquierda. Cosa que dices que no haces.

disculpen creo que eso había entendido mal.
pero si hago eso cuando el usuario use el zoom del navegador el div que este en el right no se va a quedar pegado a la derecha.
bueno de todas formas la cosas es que todos estén juntos basado en el 100%