This is a classic problem in CSS. There's not really a solution for this.
This article is a good read on this problem. It uses a technique called "faux columns".
Philippe Leybaert
2009-07-30 08:25:18
+1
A:
Thank you, that seems like a nice hack. However, I forgot to mention that the right column should have text in it, vertically centered. Am I right in believing that faux columns can't do this?
Deniz Dogan
2009-07-30 08:32:10
+1
A:
This works for me in IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).
Also works in IE 6 if you uncomment the clearer div at the bottom.
Edit: as Natalie Downe said, you can simply add width: 100%; to #container instead.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#container {
overflow: hidden;
border: 1px solid black;
background-color: red;
}
#left-col {
float: left;
width: 50%;
background-color: white;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
}
</style>
</head>
<body>
<div id='container'>
<div id='left-col'>
Test content<br />
longer
</div>
<div id='right-col'>
Test content
</div>
<!--div style='clear: both;'></div-->
</div>
</body>
</html>
I don't know a CSS way to vertically center the text in the right div if the div isn't of fixed height. If it is, you can set the line-height to the same value as the div height and put an inner div containing your text with display: inline; line-height: 110%.
streetpc
2009-07-30 09:07:34
A:
As far as I know, you can't do this using current implementations of CSS. To make two column, equal height-ed you need JS.
Calin Don
2009-07-30 09:14:14
+3
A:
You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#container {
overflow: hidden;
width: 100%;
}
#left-col {
float: left;
width: 50%;
background-color: orange;
padding-bottom: 500em;
margin-bottom: -500em;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
border-left: 1px solid black;
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}
</style>
</head>
<body>
<div id="container">
<div id="left-col">
<p>Test content</p>
<p>longer</p>
</div>
<div id="right-col">
<p>Test content</p>
</div>
</div>
</body>
I think it worth mentioning that the previous answer by streetpc has invalid html, the doctype is XHTML and there are single quotes around the attributes. Also worth noting is that you dont need an extra element with clear on in order to clear the internal floats of the container. If you use overflow hidden this clears the floats in all non-IE browsers and then just adding something to give hasLayout such as width or zoom:1 will cause IE to clear its internal floats.
I have tested this in all modern browsers FF3+ Opera9+ Chrome Safari 3+ and IE6/7/8, It may seam an ugly trick but it works well and I use it in production a lot.
I hope this helps
Natalie Downe
2009-07-30 09:29:43
The code I gave validates at W3C's validator (well, once you add a <title> element, which wasn't your point). Moreover, the specifications allow the use of single quotes according to this discussion: http://www.sitepoint.com/forums/showthread.php?t=54273#6
streetpc
2009-07-30 10:57:37
Apologies, my mistake. I have amended my answer above.Point to note though, with your method, if the right column gets bigger than the left the red shows through underneath as the two boxes are not exactly the right height. Depending on the design I would opt for either faux columns or this method with the bottom margins and padding.
Natalie Downe
2009-07-30 11:25:23