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?
<!-- 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:
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.
It's the absolute positioning. Use floats and set the footer to clear:both to avoid footer overwriting. Check the Cederholm book in my sig for good examples.
"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan
Reply With Quote
Bookmarks