|
Posted by Jens Lenge on 04/06/07 18:58
Hello world,
although this sounds like a FAQ to me, a have found no answer yet: How
can I make two columns the same height in a CSS-based layout without
using a table and without specifying a *fixed* height?
Both columns have a fixed width and adjust their height so that the
respective content fits in. Now the smaller height should be increased
so that both columns have the same height.
Can this be done with CSS only?
Small example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>
<title>Example</title>
</head>
<body>
<div style="border: 1px solid black">
<div style="float:left; width:120px; background-color:red">
This is column #1.<br>
This is column #1.<br>
This is column #1.<br>
This is column #1.<br>
This is column #1.<br>
.... (more content)
</div>
<div style="float:right; width:120px; background-color:green">
This is column #2.<br>
This is column #2.<br>
.... (more content)
</div>
How to make the red and green columns have the same height?
</div>
</body>
</html>
Navigation:
[Reply to this message]
|