Advertisement
Hey all~
I've recently been converting an old table-based website to XHTML & CSS and have run into a snag. The main content area is a 3-column layout, so I've set it up as 3 divs that are floated left. The issue is that the most content is in the center div, so it's longer than the outer columns and I want to find a way to make the left and right divs extend down so the bottom of all 3 columns line up.
So far I've tried using min-height, and setting the top and bottom margins to 0, but nothing works.
Anyone have any luck with this sort of thing?
I've recently been converting an old table-based website to XHTML & CSS and have run into a snag. The main content area is a 3-column layout, so I've set it up as 3 divs that are floated left. The issue is that the most content is in the center div, so it's longer than the outer columns and I want to find a way to make the left and right divs extend down so the bottom of all 3 columns line up.
So far I've tried using min-height, and setting the top and bottom margins to 0, but nothing works.
Anyone have any luck with this sort of thing?
posted by:
|
Advertisement
Advertisement
-
Re: How to make floated divs height equal
Sat, October 17, 2009 - 11:51 PMIf your site is a fixed width, you can fake it by creating a background image to make it look like borders.
Create a background image the width of your site by a few pixels high then repeat it vertically.
Something like this.
<div style="width: 600px; background-image:url(borders.jpg); background-repeat:repeat-y;">
<div style="float:left">blah</div>
<div style="float:left">blah blah blah blah</div>
<div style="float:left">blah</div>
</div>
The only other way I know how is with javascript.
Good luck -
-
Re: How to make floated divs height equal
Mon, October 19, 2009 - 1:46 AMmy first guess would be to put them into a 'parent' div and then make the three 'child' divs have 100% height.
then create a fourth 'child' div with a css style of 'clear:both'. I've not tried it but it would be my best guess.
so like this:
<div>
<div class='child'>blah blah</div>
<div class='child'>blah blah</div>
<div class='child'>blah blah</div>
<div class='clear'></div>
</div>
.child {
height:100%;
float:left;
}
.clear {
clear:both;
}
-
