Ne için kullanacağını bilmiyorum ama yapmak istediğin resimdeki gibi yüksekliklere göre birbiri içine girecek şekildeyse, diğer arkadaşların verdikleri işine yaramaz çünkü en büyük yüksekliğe sahip dive göre alt divleri hizalar.
Resimdeki numaralandırmadaki sırayla divleri oluşturmaya kalkınca ancak arkadaşların verdikleri kodu kullanabilirsin. (Bir kaç deneme yaptım ama o sırayla divleri oluşturduktan sonra her halikarda en uzuna göre sıralama yapıyor.)
Aşağıdaki kodlar en azından bir alternatif olur senin için:
deneme.html <!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>Deneme</title>
<link href="stil.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="kapsa">
<div class="sutun">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus purus vitae risus convallis tempor. Nulla a libero dolor, a molestie purus. Nulla eleifend, eros sit amet consequat mollis, dolor tellus sodales enim, commodo hendrerit ipsum felis in dolor. Donec eget tortor in magna aliquam lobortis vel in nisi. Nullam nunc dui, ornare non ultrices iaculis, lobortis non quam. Sed id nisi est. Nulla volutpat nunc ut mi molestie id blandit tellus consectetur. Phasellus sit amet gravida elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sollicitudin fermentum sollicitudin. Nam interdum magna quis metus semper nec imperdiet dolor iaculis. Suspendisse pretium, nibh et vestibulum pellentesque, felis orci egestas lacus, sed rhoncus mi tellus vitae urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales aliquam sapien vitae elementum. Aliquam aliquet faucibus arcu. Quisque imperdiet scelerisque tincidunt. Phasellus ligula ipsum, imperdiet at semper vitae, eleifend ac purus. Proin et nunc purus. Suspendisse rutrum lorem sit amet tortor dapibus pretium.
</div>
<div>
Donec ac molestie nisi. Sed placerat enim ut velit gravida eget congue mauris volutpat. Mauris fringilla, metus ut suscipit dignissim, ligula eros pretium libero, venenatis luctus eros dui sit amet mauris. Praesent lorem felis, porttitor mattis rhoncus a, imperdiet at lacus. Nulla facilisi. Nam vel tincidunt odio. Praesent erat quam, malesuada non ultrices at, volutpat id dolor. Maecenas tristique tempor egestas. Aenean facilisis egestas urna, sit amet fringilla lorem vehicula non. Duis vitae elit velit, eu molestie purus. Suspendisse sit amet semper nibh. Nunc sit amet lectus diam. Nam auctor porta lectus, viverra gravida est lobortis eu. Donec varius magna at leo ultrices feugiat. Proin nec diam libero. In hac habitasse platea dictumst. Maecenas vitae velit vel ligula fringilla venenatis. Sed sed enim nunc, scelerisque tempus turpis. Vestibulum tellus felis, ultricies eget aliquam ac, auctor vitae lectus.
</div>
</div>
<div class="sutun">
<div>
In ut elit eleifend felis molestie dapibus eget convallis massa. Morbi sagittis, felis ut vestibulum interdum, tortor est sodales purus, nec scelerisque orci quam id turpis. In sit amet dui eget eros feugiat euismod. In ligula elit, fermentum in posuere et, varius at sem. Duis mi libero, posuere at facilisis sed, rutrum sollicitudin nulla. Curabitur facilisis, neque nec lacinia viverra, mauris ante tincidunt purus, vitae egestas magna neque et libero. Sed non magna orci. Suspendisse potenti. Nunc laoreet lobortis scelerisque. In posuere dolor vitae sapien fringilla eu dignissim erat suscipit. Donec eget leo vel turpis pretium lacinia a sed odio.
</div>
<div> Aliquam elementum quam sed ipsum dignissim mollis. Mauris feugiat libero eget enim eleifend porttitor. Praesent suscipit est in massa interdum nec pellentesque purus rutrum. Aenean magna nisl, congue ut blandit a, cursus ac libero. Praesent dapibus sapien id dolor congue et semper augue tincidunt. Proin auctor, nibh nec porta pretium, mauris ligula rutrum erat, vel mollis nibh tellus in ante. Pellentesque et augue vel dui gravida posuere vitae in nunc. Donec dictum, ligula eu molestie imperdiet, ante velit commodo nulla, sed pharetra nibh erat vel sem. Etiam consectetur est elit, vitae elementum turpis. Nulla auctor felis ante, quis rhoncus ante. Nulla vel justo et elit dapibus viverra id in sem. Etiam risus tellus, congue et consectetur ultrices, facilisis a metus. Ut nec felis purus. Aliquam in libero justo, nec gravida elit. Nam nec est purus, porttitor ultrices risus. Vivamus a eros velit. Cras iaculis, dui nec tempor rhoncus, odio dui venenatis turpis, nec viverra tellus dolor ut dui.
</div>
</div>
<div class="sutun">
<div> Aenean metus ligula, imperdiet id bibendum non, rutrum nec dolor. Vivamus consectetur elit a dui dictum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi pretium aliquet mattis. Nunc fermentum dui vitae diam condimentum fermentum. Praesent semper ornare tellus, eu aliquam risus iaculis nec. Donec eu fringilla sem. Quisque egestas bibendum orci ut euismod. Mauris a lectus quis elit sagittis iaculis. Curabitur pellentesque est et justo fermentum convallis. Etiam quis turpis ut libero imperdiet feugiat non eu velit.
</div>
<div> Aenean metus ligula, imperdiet id bibendum non, rutrum nec dolor. Vivamus consectetur elit a dui dictum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi pretium aliquet mattis. Nunc fermentum dui vitae diam condimentum fermentum. Praesent semper ornare tellus, eu aliquam risus iaculis nec. Donec eu fringilla sem. Quisque egestas bibendum orci ut euismod. Mauris a lectus quis elit sagittis iaculis. Curabitur pellentesque est et justo fermentum convallis. Etiam quis turpis ut libero imperdiet feugiat non eu velit.
</div>
<div> Aenean metus ligula, imperdiet id bibendum non, rutrum nec dolor. Vivamus consectetur elit a dui dictum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi pretium aliquet mattis. Nunc fermentum dui vitae diam condimentum fermentum. Praesent semper ornare tellus, eu aliquam risus iaculis nec. Donec eu fringilla sem. Quisque egestas bibendum orci ut euismod. Mauris a lectus quis elit sagittis iaculis. Curabitur pellentesque est et justo fermentum convallis. Etiam quis turpis ut libero imperdiet feugiat non eu velit.
</div>
</div>
</div>
</body>
</html>stil.css body {
color: #000;
background: #f1f1f1;
}
#kapsa {
width: 600px;
margin: 0 auto;
}
.sutun {
float: left;
width: 200px;
}
.sutun div {
float: left;
width: 180px;
background: #333;
color: #FFF;
margin: 10px;
}