Comunidad de diseño web y desarrollo en internet online

Crear columnas y filas de diferentes alturas con div

Citar            
MensajeEscrito el 03 Sep 2009 11:24 pm
Buenas tengo un problema para crear unas columnas y filas con div.
No se bien como explicarlo con palabras por eso hice unas imagenes.

Este es mi código:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Divs</title>
<style>
.ul { width: 400px;  }
.li {
width: 45%; margin: 2%;
float: left;
border: 1px solid #009;
  }
</style>
</head>

<body>
<div class='ul'>
<div class="li">
   <ul>
    <li>adasda</li>
    <li>asdasder</li>
    </ul>
</div>
<div class="li">
   <ul>
    <li>adasda</li>
    <li>adasda</li>
    <li>adasda</li>
    <li>adasda</li>
    <li>adasda</li>
    <li>adasda</li>
    <li>asdasder</li>
    </ul>
</div>
<div class="li">
   <ul>
    <li>adasda</li>
    <li>adasda</li>
    <li>adasda</li>
    <li>adasda</li>
    <li>adasda</li>
    <li>asdasder</li>
    </ul>
</div>
<div class="li">
   <ul>
    <li>adasda</li>
    <li>adasda</li>
    <li>adasda</li>
    <li>asdasder</li>
    </ul>
</div>
<div style="clear: both"></div>
</div>
</body>
</html>


Me genera esto:


Pero necesito esto:


NO quiero generar 2 div contenedores y hacer los float left porque el conetnido de la página es generado dinamicamente


Gracias

Por mpriet

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Sep 2009 08:28 pm
¿Y si creas todos los contenedores y a todos les pones float left? Todo dentro de un div con un ancho determinado. No tengo muy caro que vaya a funcionar, pero creo que en smashing magazine había un tut que explicaba como hacer esto. Buscalo porque yo no tengo tiempo...

Hasta pronto!

Por jackbach

Claber

196 de clabLevel

1 tutorial

 

Barcelona

firefox
Citar            
MensajeEscrito el 05 Sep 2009 07:14 pm
no es necesario crear 4 div... si ya tienes 4 ul... que como te indican con un float left y un ancho definido a estos mismos... y claro que influye el ancho del contenedor tiene que ser menor a 3 veces el ancho de tu ul ok?... y ya chao y suerte!...

Por alexk

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Sep 2009 03:09 am
agrupa las cosas en 2 columnas

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8">
  <title>Divs</title>
  <style>
.columna {
width: 40%; margin: 2%;
float: left;
border: 1px solid #009;
}
  </style>
</head>
<body>
<div class="columna">
<ul>
  <li>adasda</li>
  <li>asdasder</li>
</ul>
<ul>
  <li>adasda</li>
  <li>adasda</li>
  <li>adasda</li>
  <li>adasda</li>
  <li>adasda</li>
  <li>adasda</li>
  <li>asdasder</li>
</ul>
</div>
<div class="columna">
<ul>
  <li>adasda</li>
  <li>adasda</li>
  <li>adasda</li>
  <li>adasda</li>
  <li>adasda</li>
  <li>asdasder</li>
</ul>
<ul>
  <li>adasda</li>
  <li>adasda</li>
  <li>adasda</li>
  <li>asdasder</li>
</ul>
</div>
</body>
</html>

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 18 Jul 2012 04:54 pm
alguien tiene solución para esto? me pasa exactamente lo mismo¡¡

Por lusifer

43 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 Jul 2012 05:03 pm
prueba con display: inline-block

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

chrome
Citar            
MensajeEscrito el 18 Jul 2012 05:11 pm
no funciona me lo descuadra todo, esto es justo lo que quiero hacer. como puedes ver columnas con distintos tamaños y se colocan perfectamente

http://subefotos.com/ver/?623da847a69966f3ac20336737f170f5x.png#codigos

Por lusifer

43 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.