Here's my situation and I'm not sure how to fix it.
I have a "sort of" 3-column format. Basically, I have stuff in the left and stuff in the right. What I'm wanting to do is to have the center column wrap around the bottoms of the left and right menus when they come to an end. I'm fully expecting to have the body content go below the two columns. Right now, if I don't set margins on the main content div, it displays under the columns.
Is there a way to achieve my desired results or am I stuck with wide margins on each side even as the content goes below the menu divs on each side?
This does what I think you want:
<!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-GB">
<head>
<title>Tim's three-column test page</title>
<style media="screen" type="text/css">
.col1 {width:20%; left:0%; float:left; position:relative;}
.col2 {position:relative;}
.col3 {width:20%; right:0%; float:right; position:relative;}
</style>
</head>
<body>
<div class="col1">
<h2>This is column one</h2>
<p>blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1 blah1</p>
</div>
<div class="col3">
<h2>This is column three</h2>
<p>blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3 blah3</p>
</div>
<div class="col2">
<h2>This is column two</h2>
<p>blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 blah2 </p>
</div>
</body>
</html>
