Foros del Web » Creando para Internet » CSS »

Doble columna con css

Estas en el tema de Doble columna con css en el foro de CSS en Foros del Web. Buenas, tengo que hacer unas 2 columnas con divs o spans en las cuales, segun si es de class=izq o de class=der se posicione en ...
  #1 (permalink)  
Antiguo 11/02/2011, 09:51
Avatar de Joni2Back  
Fecha de Ingreso: marzo-2009
Mensajes: 146
Antigüedad: 8 años, 8 meses
Puntos: 1
Pregunta Doble columna con css

Buenas, tengo que hacer unas 2 columnas con divs o spans en las cuales, segun si es de class=izq o de class=der se posicione en cada lado.
logre hacerlo, el problema esta en que cuando supongamos
tengo primeras 3 divs de class izq.. y luego 2 de class der.. , las de la derecha no quedan arriba de todo, sino en la misma linea de la ultima.. aca pongo un ejemplo y el codigo de fuente


Código:
<style>
div.comments {
width:200px;
}

div.izq {
float:left;
background:green;
clear:both;
width:50%;
}

div.der {
width:50%;
float:right;
background:red;
vertical-align:top;
}
</style>

<div class="comments">
    <div class="izq">google.com</div>
    <div class="izq">google.com</div>
    <div class="izq">google.com</div>
    <div class="der">google.com</div>
    <div class="izq">google.com</div>
    <div class="izq">google.com</div>
    <div class="izq">google.com</div>
    <div class="izq">google.com</div>
    <div class="der">google.com</div>
    <div class="izq">google.com</div>
</div>
__________________
joni2back {arr0ba} gmail {punto} com
  #2 (permalink)  
Antiguo 11/02/2011, 10:41
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Doble columna con css

La solución habitual es crear dos divs derecha e izquierda y colocar dentro de éstos el resto.
<div class="comments">
<div class="izquierda">
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
</div>
<div class="derecha">
<div class="der">google.com</div>
<div class="der">google.com</div>
</div>
</div>
  #3 (permalink)  
Antiguo 11/02/2011, 10:45
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 9 años, 4 meses
Puntos: 103
Respuesta: Doble columna con css

sanxuan yo estaba haciendo lo mismo jeje
Cita:
<style>
div.comments {
width:100px;
float:left;
}

div.izq {
float:left;
background:green;
clear:both;
width:50%;
}

div.der {
width:50%;
float:left;
background:red;
vertical-align:top;
clear:both;
}
</style>

<div class="comments">
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
</div>
<div class="comments">
<div class="der">google.com</div>
<div class="der">google.com</div>
</div>


  #4 (permalink)  
Antiguo 11/02/2011, 10:51
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Doble columna con css

pues lo que ya dijeron los compañero e igual te comento tu problema radica en el clear:both

Cita:
div.izq {
float:left;
background:green;
clear:both;
width:50%;
}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: columna, doble
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:35.