views:
56answers:
2
+2
A:
I usually create a containing div (which emulates a table row), and then divs for the specific columns (emulates table data).
<div class="container">
<div class="left-column column"></div>
<div class="right-column column"></div>
</div>
Then make the container relatively positioned:
.container { position: relative }
This allows absolutely positioned elements within the container. Then we can use some of the benefits of absolute positioning to stretch the column divs:
.column { position: absolute; top: 0; bottom: 0; }
Then you will want to put the left column on the left and the right column on the right:
.left-column { left: 0; }
.right-column { right: 0; }
The rest (styling) is up to you, I think that should do it.
Edit: Proof Of Concept
I wrote this proof of concept code as follows:
<html>
<head>
<style type="text/css">
.container { height: 200px; width: 200px; position: relative; border: 5px solid red; }
.left-column { width: 100px; background-color: blue; left: 0; }
.right-column { width: 100px; background-color: yellow; right: 0; }
.column { position: absolute; top: 0; bottom: 0; }
</style>
</head>
<body>
<div class="container">
<div class="left-column column"></div>
<div class="right-column column"></div>
</div>
</body>
</html>
Which renders as:
I hope that helps.
Marcus Whybrow
2010-03-15 16:06:45
I was expecting a tables vs. CSS firestorm!
tahdhaze09
2010-03-17 20:25:09
+1
A:
An excellent example here that shows how to do full and equal height columns in a css fashion.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm
Robin Day
2010-03-15 16:13:36