Menu
Hi guys, I’m currently facing a bit of a challenge. I just recently switched, after years of experience, from using tables to CSS for layouts – so bear with me.
I need two columns for the content area of my design, and the way I’ve been doing that on the pages I’ve built is to have a middle container, and in that have a relatively positioned content block that’s the right size for whichever column is bigger. I don’t specify a height for this portion because it will usually grow, and I know it will be the bigger one. To get the other column, I simply add an absolutely positioned div nested inside the relatively positioned one, and position it accordingly.
This has worked in the past, but for this website, I’m not sure which column will be bigger. It will actually vary from page to page, depending on how much information is or isn’t available.
The problem is that if the absolute positioned div is the bigger of the two, it will obviously be displayed over part of the footer.
So my question is:
How do I get two columns using CSS where either one will expand the parent container?
Here’s my very dumbed down HTML:
[b]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
<html xmlns=”
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<link href=”format.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div class=”container”>
<div class=”header”></div>
<div class=”middle”>
<!– right column starts here –>
<div class=”content3″>
<!– left column box starts here –>
<div class=”ad_box3_2″>
Left column ads go here.</div>
<!– left column box ends here –>
Right column text goes here.
<!– right column ends here –>
</div>
</div>
<div class=”footer”></div>
</div>
</body>
</html>
And here’s the CSS for the middle area where I’m having issues:
[b].middle {
width: 760px;
}
.content3 {
position: relative;
display: block;
top: 0px;
left: 330px;
margin: 0px;
width: 415px;
padding: 0px;
min-height: 565px;
}
.ad_box3_2 {
position: absolute;
left: -315px;
margin: 0px;
padding: 0px;
width: 300px;
text-align: left;
text-indent: 0px;
}
The min-height thing fixes the issue in FF, but not IE. Thanks for any help given, and if anyone notices any other major issues with the way I’m doing this (not pertaining to the actual problem), please speak up.
Thanks guys