Two Columns, Equal Height

[Wayder]

I have five (or more) divs with dynamic content that I want to display in two columns. I have tried using float:left; but if one div is a little longer than normal, it creates a space below it.

Here is the code that I am using.

#eventlist {
background-color:#CCF;
position:relative;
float:left;
width:68%;
}
.event_group {
background-color:#FCF;
position:relative;
margin:0 0.5em 1em 0;
padding:0 2em 0.25em 0;
width:44%;
float:left;
}

<div id="eventlist">
<div class="event_group">
<h2>Group 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="event_group">
<h2>Group 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="event_group">
<h2>Group 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="event_group">
<h2>Group 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="event_group">
<h2>Group 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

Is there any way I can remove the gap between the “Group 4” div and the “Group 1” div?

Thanks for looking.

[alias]

That is the natural way the layout behaves. The only thing you could do in this case is to make all boxes in one row to be of equal height (with JavaScript), or simply force them all to be of equal height.

[Wayder]

Do you know of any way I could lay it out to get the effect that I want other than fixed/equal heights?

I can make any markup, I'm flexible.

Thanks

[rocknbil]

You say dynamically . . . do you have control over the dynamics? If you do, this is how I would deal with it. I'll do this in everyone's favorite, PHP. As I iterate through my database, append each "chunk" to the total page output.

<div class="event_group">
<h2>Group 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

So you add this:

.clear-div { clear: both; }

to the style sheets. You have two columns. So while iterating through the results, every second one you output

<div class="clear-div"></div>

So all together,

// connect to db, do your query, etc. 
$content = null; 
$colcount = 0; 
while ($row = mysql_fetch_array($result)) { 
 $content .= " 
 <div class=\"event_group\"> 
 <h2>" . $row['title'] . "</h2> 
 " . $row['content'] . " 
 </div> 
 "; 
 if ($colcount >= 1) {  
 $content .= "<div class=\"clear-div\"></div>\n"; 
 $colcount=0; // reset 
 } 
} 
if ($content) { 
 // add the last clear div for odd rows. 
 if ($colcount > 0) { 
 $content .= "<div class=\"clear-div\"></div>\n"; 
 } 
 echo " 
 <div id=\"eventlist\"> 
 $content 
 </div> 
 "; 
} 
else { echo "<p>No events to display.</p>"; } 

Which should give you output like this, with only the clear-div added to the CSS.

<div id="eventlist">
<div class="event_group">
<h2>Group 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="event_group">
<h2>Group 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="clear-div"></div>

<div class="event_group">
<h2>Group 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="event_group">
<h2>Group 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="clear-div"></div>

<div class="event_group">
<h2>Group 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="clear-div"></div>

</div>

That will still give you "gaps" but they will align. To remove gaps, you're going to have to prefetch the total number of records, take the larger half and stuff it into column one, then the remainder in column two.

[SuzyUK]

amazing answer rNb!
- can't wait for multi-columns it would sort this in a jiffy!

Wayder You could also add another class name to each "event_group" a distinct one for each group, then with a little judicial clearing or not on the floats you can get specific in the CSS as to which ones to clear kind of making it look like columns, you would still need a teeny idea of which "blocks" are likely to be longest or you could just split your 5/6 divs/block half in half..

e.g.

<div id="eventlist"> 
<div class="event_group g1"> 
<h2>Group 1</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 
<div class="event_group g2"> 
<h2>Group 2</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 
<div class="event_group g3"> 
<h2>Group 3</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 
<div class="event_group g4"> 
<h2>Group 4</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 
<div class="event_group g5"> 
<h2>Group 5</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 
</div>

CSS amended:

#eventlist { 
background-color:#CCF; 
position:relative; 
float:left; 
width:68%; 
} 
.event_group { 
background-color:#FCF; 
position:relative; 
margin:0 0.5em 1em 0; 
padding:0 2em 0.25em 0; 
width:44%; 
float:left;

clear: left;
}

.g3, .g4, .g5 {clear: none;}

this changes the order too, as the "columns" now run top to bottom, left to right instead of left to right/top to bottom, clear the ones you want in the left column, and not the ones in the right

[Wayder]

Hey thanks. Thats a neat solution too.

What I did was query the groups, add them to an array, count the group qtys, sort them by qty desc and then split them into two arrays left & right, adding to the relevant array depending on which array was the shortest.

I then echo'd the arrays to screen in two divs, left & right.

It worked like a charm and got rid of all those vertical gaps.

Thank you for your help.