hacer divs de 3 columnas y darle espacio a ellos

[esaenz22]

buenas a todos. googleando, encontre un codigo para desarrollar divs de 2 columnas.

Código CSS:

#column_left {
    width:200px;
    background-color:#5B7444;
    height:300px;
    float:left;
}
#column_right {
    width:600px;
    background-color:#47697E;
    height:300px;
    float:right;
}
 

entendiendo como funciona el css, lo adapte a uno de mis proyectos.

mi consulta es como debo desarrollar para divs de 3 columnas y darle un espacio determinado ?.

[daPhyre]

Creo que esto es justo lo que buscas: http://cssya.com.ar/temarios/descripcion.php?cod=43

En resumen:

Código CSS:

#columna1
{
  float:left;
  width:200px;
  margin:0;
  padding:1em;
}
#columna2
{
  margin-left:210px;
  margin-right:230px;
  border-left:1px solid #aaa;
  border-right:1px solid #aaa;
  padding:1em;
}
#columna3
{
  float:right;
  width:200px;
  margin:0;
  padding:1em;
}
 

[masterojitos]

bueno, mi amigo daPhyre ya te paso un codigo.....
ps la verdad que yo prefiero trabajar con posiciones absolutas y darles posiciones a mi gusto.

Código CSS:

#column1 {
    position:absolute;
    left:0px;
    width:200px;
    background-color:#5B7444;
    height:300px;
}
#column2 {
    position:absolute;
    left:200px;
    width:600px;
    background-color:#47697E;
    height:300px;
}
#column3 {
    position:absolute;
    left:800px;
    width:200px;
    background-color:#5B7444;
    height:300px;
}
 

entonces ya cada una tendria una posicion establecida y si quieres, puedes darle espacio entre ellas, subirlas o bajarlas a tu gusto.

suerte.

[esaenz22]

gracias por su ayuda. leere el codigo css que publicaron.

una consulta. por que es necesario colocar position: absolute ?

saludos.

[AhmedRugama]

posicion absolute es para indicar la posicion del div mediante coordenadas, puedes ver en el ejemplo de masterojito que los hubica con left en las coordenadas 0, 200 y 800

[alexk]

yo prefiero trabajar con posiciones absolutas y darles posiciones a mi gusto.

:S...

sera mejor que te pases aqui
http://araudi.net/

yo acostumbro algo mas sencillo aver... supongamos que tenemos solo

.column{
width:200px;
float:left;
}

y queremos 3 columnas? que su contenedor tiene 600px aver... es facil la ecuacion no?...

Código HTML:

<div class="contenedor">
    <div class="column">
        <p>columna uno</p>
    </div>    
    <div class="column">
        <p>columna dos</p>
    </div>    
    <div class="column">
        <p>columna tres</p>
    </div>    
</div>
 

y listo...

tambien podemos usar clases diferentes a cada columna para diferenciarlas

Código HTML:

<div class="contenedor">
    <div class="column_izquierda">
        <p>columna uno</p>
    </div>    
    <div class="column_centro">
        <p>columna dos</p>
    </div>    
    <div class="column_derecha">
        <p>columna tres</p>
    </div>    
</div>
 

y agruparlas en el css

Código CSS:

.column_izquierda, .column_centro, .column_derecha{
    width:200px;
    float:left;
}
 

y luego manipular las clases independiente mente... yo creo que es mas facil y menos codigo

[esaenz22]

muchas gracias por su ayuda. modificando lo que aportaron daPhyre, masterojitos y alexk, hice las 3 columnas de esta manera:

Código CSS:

#footer{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    width:960px;
    height:22px;
    margin:0px auto;
}
 
#footer_izquierda{
   width:216px;
   height:auto;
   margin:0 0 0 5px;
   float:left;
   padding:3px;
}
 
#footer_derecha{
    width:134px;
    height:auto;
    margin:0 10px 0 0;
    float:right;
    padding:3px;
}
 
#footer_principal{
    width:604px;
    height:auto;
    margin:0 5px 0 350px !important;
    padding:2px;
}
 

Código HTML:

<div id="footer">
    <div id="footer_izquierda"><a href="#" class="enlacewebmail">Webmail</a></div>
    <div id="footer_derecha">Powered by INTERCOM</div>
    <div id="footer_principal">Copyright 2009</div>
</div>
 

pero hay un problema. al momento de mostrarlo en el ie7, el id #footer_principal se va hacia abajo, es decir, no se muestra en la parte superior, mientras que en ie6 sale bien.

deseo mostralo de esa manera:



que el texto copyright 2009 se centre.

me podran ayudar en ello ?.

saludos.

[jomaruro]

Hola:

Al div footer_principal dale margin:o auto;

Saludos.

[esaenz22]

gracias por responder jomaruro. eso hare.

saludos.

[esaenz22]

lo modifique en el id del div footer_principal jomaruro, pero no se ve bien en ie7, mientras que en el ie6, se ve bien.

Código CSS:

#footer_izquierda{
   width:216px;
   height:auto;
   margin:0 0 0 5px;
   float:left;
   padding:3px;
}
 
#footer_derecha{
    width:134px;
    height:auto;
    margin:0 10px 0 0;
    float:right;
    padding:3px;
}
 
#footer_principal{
    width:604px;
    height:auto;
    margin:0px auto;
}
 

la imagen que adjunte:



debo mostrarlo asi igual.

me podran ayudar en ello.

saludos.

[jomaruro]

Hola:

Tienes razón, prueba con text-align:center. De todas formas me surge una duda ¿lo quieres centrado con respecto al div que lo contiene o con respecto a la página?

Saludos.

[esaenz22]

te refieres al contenedor jomamuro o al div footer que contiene las 3 columnas ?

saludos.

[jomaruro]

Hola:

Me refiero a si quieres el texto "Copyright 2009" centrado en el div footer_principal o con respecto a la página.

Saludos.

[esaenz22]

que este centrado en el div footer_principal.

saludos.

[jomaruro]

Hola:

Entonces te funcionará con text-align:center puesto en los estilos del footer_principal.

Saludos.

[esaenz22]

no jomaruro. le puse el text-align:center y no funciono.

alguna solucion ?

edito. le dejo el estilo y lo que estoy maqueteando. en realidad, se lo basico de css, pero quiero aprender mas.

Código CSS:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #FFFFFF;
}
 
#contenedor{
    width:960px;
    height:780px;
    margin:0px auto;
}
 
#cabecera{
    width:960px;
    height:141px;
    margin:0px auto;
    border:#666666 1px solid;
}
 
#espacio1{
    width:960px;
    height:11px;
    margin:0px auto;
}
 
#espacio2{
    width:960px;
    height:14px;
    margin:0px auto;
}
 
#cuerpo{
    width:960px;
    height:327px;
    margin:0px auto;
    border:#666666 1px solid;
}
 
#detalles{
    width:960px;
    height:234px;
    margin:0px auto;
    border:#666666 1px solid;
}
 
#column_izquierda {
    width:216px;
    height:226px;
    float:left;
    border:#666666 1px solid;
}
#column_derecha {
    width:738px;
    height:233px;
    float:right;
    border:#666666 1px solid;
}
 
/* sufijos 
-top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
 
#column_derecha ul li{
    float: left;
    width: 40% ;!important
    list-style-type:none;
    margin:5px;
    margin-left:2px;
}
 
#espacio3{
    width:960px;
    height:19px;
    margin:0px auto;
}
 
#footer{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    width:960px;
    height:auto;
    margin:0px auto;
    border:#666666 1px solid;
}
 
/* sufijos 
-top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
 
#footer_izquierda{
   width:216px;
   height:auto;
   margin:0 0 0 5px;
   float:left;
   padding:2px;
}
 
#footer_derecha{
    width:134px;
    height:auto;
    margin:0 0 0 10px;
    float:right;
    padding:2px;
}
 
#footer_principal{
    width:604px;
    height:auto;
    text-align:center;
}
 

Código HTML:

<div id="contenedor">
  <div id="cabecera"></div>
  <div id="espacio1"></div>
  <div id="cuerpo"></div>
  <div id="espacio2"></div>
  <div id="detalles">
    <div id="column_izquierda"> <img src="imagenes/producto_destacado.jpg" /> </div>
    <div id="column_derecha">
        <ul>
          <li><img src="imagenes/encapsulados.jpg" border="0" /></li>
          <li><img src="imagenes/industriales.jpg" border="0" /></li>
          <li><img src="imagenes/iluminacion.jpg" border="0" /></li>
        </ul>
    </div>
  </div>
  <div id="espacio3"></div>
  <div id="footer">
    <div id="footer_izquierda"><a href="#" class="enlacewebmail">Webmail</a></div>
    <div id="footer_derecha">Powered by INTERCOM</div>
    <div id="footer_principal">Copyright 2009</div>
  </div>
</div>
 

saludos.

[alexk]

es muy sencillo lo que necesitas y con medidas fijas asi que te recomiendo usar lo que te puse usando clases diferentes para que el centro sea mas grande y con texto centrado... y listo

[esaenz22]

lo he modificado alexk con las clases, pero aun asi no se acomoda al boceto.

saludos.

[jomaruro]

Hola:

Prueba cambiando lo que te indico en rojo (aunque tendrás que adaptar las medidas):

Código:

<div id="footer">
<div id="footer_izquierda"><a href="#" class="enlacewebmail">Webmail</a></div>
<div id="footer_principal">Copyright 2009</div>
<div id="footer_derecha">Powered by INTERCOM</div>
</div>

Código:

#footer{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    width:960px;
    height:auto;
    margin:0px auto;
    border:#666666 1px solid;
    overflow:auto;
}
 
/* sufijos 
-top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
 
#footer_izquierda{
   width:216px;
   height:auto;
   margin:0 0 0 5px;
   float:left;
   padding:2px;
}
 
#footer_derecha{
    width:134px;
    height:auto;
    margin:0 0 0 10px;
    float:right;
    padding:2px;
}
 
#footer_principal{
    width:604px;
    height:auto;
    text-align:center;
    float:left;
}

Saludos.

[esaenz22]

gracias por la ayuda jomamuro.

alexk coloco antes un pequeño codigo y bueno lo acomode a las medidas de las 3 columnas. se agradece tu ayuda.

otra consulta. quiero mostrar 3 imagenes en columnas utilizando las etiquetas <ul> y <li>.

quiero mostrarlo de esa manera.



hice el codigo css para listar las imagenes en columnas.

Código CSS:

#columna {
    width:738px;
    height:226px;
    float:left;
    border:#666666 1px solid;
}
/* sufijos 
-top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
 
#columna ul li {
    display:inline;
    float: left;
    width: 278px;
    list-style-type:none;
}
 

al momento de mostrarlo en el ie6 y ie7, se muestra de esta manera.



me puede ayudar en ello jomamuero ?.

saludos.

[jomaruro]

Hola:

¿Y como quieres que se muestre?

Saludos.

[esaenz22]

coloque una imagen.

Edito. no he colocado la imagen correctamente porque coloque otra imagen que me mostraba las imagenes incorrectamente.

como le decia, quiero mostrar 3 imagenes en columnas utilizando las etiquetas <ul> y <li>.

deseo mostrarlo de esa manera ?.



hice el codigo css para listar las imagenes en columnas.

Código CSS:

#columna {
    width:738px;
    height:226px;
    float:left;
    border:#666666 1px solid;
}
/* sufijos 
-top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
 
#columna ul li {
    display:inline;
    float: left;
    width: 278px;
    list-style-type:none;
}
 

al momento de mostrarlo en el ie6 y ie7, se muestra de esta manera.



me puede ayudar en ello ?.

saludos.

[jomaruro]

Hola:

Sigo sin saber que es lo que quieres.

¿Deseas que las tres imágenes esten una al lado de la otra y una de ellas se te pone debajo? Eso es porque el ancho total de las imágenes + padding + margin + border (si los hubiera) es mayor que el div que las contiene.

Si no es eso, ya lo explicarás.

Saludos.

[esaenz22]

esta es la imagen que quiero mostrarlo de esta manera:



hice el codigo css.

Código CSS:

#columna {
    width:738px;
    height:226px;
    float:left;
    border:#666666 1px solid;
}
/* sufijos 
-top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
 
#columna ul li {
    display:inline;
    float: left;
    width: 278px;
    list-style-type:none;
}
 

al momento de mostrarlo en el ie6 y en el ie7, la imagen se pone debajo.



a que se debe eso, sera por el ancho de las imagenes, el padding, el margin de las imagenes que el div columna los contiene ?.

me puede ayudar en ello por favor jomaruro ?

saludos.

[daPhyre]

Creo que sería que la suma de todos hacen que el tercero vaya a la segunda fila. Si no quieres que ocurra esto por ningún motivo, es posible que un overflow:hidden al UL pudiera servir. Es posible que requiera una altura predeterminada. Suerte.

[jomaruro]

Hola:

Es lo que te he dicho antes, el ancho de las imágenes + padding + margin + border es mayor que el div que las contiene.

Para solucionarlo puedes aumentar el ancho del div, reducir el tamaño de las imágenes o reducir el padding, etc.

Saludos.

[esaenz22]

gracias por responder jomamuro. pero eso ya depende del boceto jomamuro ?.

bueno. para que me entienda, yo hice divs de 2 columnas. luego de eso, el ancho que contiene el div para las imagenes tiene de ancho de 737 px y las 3 imagenes tienen de tamaños 251 x 201 (excepto el tercero que tiene de tamaño 233 x 201).

al momento de mostrarlo en el ie7, las imagenes se desplazan a la derecha. coloque marginf-left 5 ó 10px pero aun asi no funciona.

Código CSS:

#columna {
    width:737px;
    height:226px;
    float:left;
    border:#666666 1px solid;
}
/* sufijos 
-top (superior), -bottom (inferior), left (izquierda) y right (derecha): */
 
#columna ul li {
    display:inline;
    float: left;
    width: 251px;
    list-style-type:none;
}
 

cual es mi error ?. quiero que se vea bien en ie6 y en el ie7.

saludos.

[esaenz22]

ya lo solucione. lo que sucedio es que las imagenes tenian diferentes tamaños, asi que investigando, solo he colocado margin:0 y padding:0 para que sea equitativo.

gracias por su ayuda.

saludos.