0

How do I accomplish this

Dynamic divs

with this - each div is generated in the order shown on the server and has unknown height:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>Untitled</title>
    <style type="text/css">
    div {width:100px;color:white;background-color:grey;border:solid 5px black; margin:2px}
    .wrapper {width:331px;height:400px;border:solid 1px black;float:left;}
    </style>
  </head>
<body>
    <form id="form1" runat="server">
   <div class="wrapper">
    <div class="shortDiv" style="float:left;">1 some stuff</div>
    <div class="tallDiv" style="float:left;">2 some stuff some stuff</div>
    <div class="shortDiv" style="float:left;">3 some stuff</div>
    <div class="shortDiv" style="float:left;">4 some stuff</div>
    <div class="shortDiv" style="float:left;">5 some stuff</div>
    <div class="shortDiv" style="float:left;">6 some stuff</div>
    <div class="tallDiv" style="float:left;">7 some stuff some stuff</div>
    <div class="shortDiv" style="float:left;">8 some stuff</div>
    <div class="shortDiv" style="float:left;">9 some stuff</div>
</div>
    </form>
</body>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • 2
    I was going to write a longer answer, but the point of it is to use jQuery Masonry, and that's just been posted. For further info, see: http://stackoverflow.com/search?q=user%3A405015+masonry - particularly: http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights/5234858#5234858 If it's a fixed number of columns, you can do what @Cristian said, but that does not appear to be the case here. – thirtydot Apr 19 '11 at 14:29

2 Answers2

4

Good old jQuery Masonry might help you here:

http://desandro.com/resources/jquery-masonry/

Alex
  • 7,320
  • 1
  • 18
  • 31
-1

If you want to do with CSS you can do in the following way:

  • Create 3 columns (or more) with float:left; and a fixed width
  • Put into each column the elastic boxes, the height is defined based on the context of the box
Cristian
  • 327
  • 2
  • 9