how to make div's with different heights automatically divide into three columns?

[ltse]

My question is rather simple:

I have several divs as follows

<div id="wrapper">
 <div class="left">...</div>
 <div class="middle">...</div>
 <div class="right">...</div>
 <div class="left">...</div>
 <div class="middle">...</div>
 <div class="right">...</div>
 <div...
</div>

And the css looks like this:

#wrapper { width:910px; }

.first, .middle, .last { width:300px;  float:left; clear:none; }
.first { margin-right: 5px; clear:both; }
.middle { margin-right: 5px; }

Now, this gives me the divs in 3 nice columns, but the divs all have different heights, and the next row only starts after the longest div of the previous row ends. How can I make it, so that there are no irregular spaces between the divs of the same column?

[Beverleyh]

I would suggest giving all the divs a fixed height but I'm not entirely sure if this is the overall effect you'd like to achieve - can you provide a diagram to illustrate what you want versus what is currently happening?

How about a sample page link too? Its probably easier if you provide a (non)working mock-up to help explain the problem you describe.

[ltse]

Well, there is a different amount of content in each div, that's why they can't all have the same size.
here is a link: http://hddevelopement.funpic.de/test/divs.html

This is what it looks like now:
___ ___ ___
## ## ##
## ## ##
## ##
## <-- the longest div from the first row ends,
___ ___ ___
## ## ## <-- and all following divs start at the same "height"
## ## ##
## ##
##

However, it should look like this:
___ ___ ___
## ## ##
## ## ##
___ ## ## <-- as soon as the div stops, another one begins
## ## __
## ___ ##
## ## ##
## ##
##
.
.
.

Hope, that is understandable.

It would be even better, if this could be achieved with div's that all have the same style, but that's secondary.

I thought it could maybe be done by changing the "clear" or "position" attribute, but I wasn't able to achieved the desired effect.

[Beverleyh]

Probably a good idea to take the full screen popup ads off your test page...

[ltse]

Ha! I wish, but I'm using a free hosting server for the test page which automatically inserts those.

Anyway, they have no effect on the problem. It also occurs in offline testing in all browsers.

Do you have any Idea, what the problem might be? I thought it was something simple I just wasn't aware of

[Beverleyh]

I'm still not sure, but is sounds like you want something like this?


3 div columns with varying height divs within each?

If so, you're approaching the markup from the wrong angle.

Start with the 3 main/outer div columns and then stack you inner divs inside them;

<div class="yellow"> 
    <div>cat</div>
    <div>dog</div>
    <div>mouse</div>
</div>
<div class="purple"> 
    <div>red</div>
    <div>green</div>
    <div>yellow</div>
</div>
<div class="pink"> 
    <div>small</div>
    <div>medium</div>
    <div>large</div>
</div>

Is this what you mean?

[ltse]

Hm, yes. The outcome is exactly what I want. However, I was hoping that it could be approached without separating the content-containing-divs into three parent divs. Do you think thats possible?

[Beverleyh]

I dont believe so - I think you would need the 3 containing divs for linear structure otherwise shorter divs will always float up against higher ones (on their left) and only break onto a new line after the highest one on that row allows the following divs to clear.

[ltse]

Okay, I see. Thank you for your help!