How can a float design achieve this table-like result? - html

Question

I'm usually a Web technologies enthusiast, and I'm all for the no-tables-design thing, but right now, it's somewhat pissing me off. :/
I'm trying to achieve something that would have been extremely easy with tables, but that seems overly complex/impossible using floating elements. Look at the following:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
+-----------------+
Where #info has a fixed width, and must be floating right to #contents. #contents should take whatever's left of the width.
In the simple design where both #contents and #info are present, this isn't too complex. They are both fixed-width, have the float:left property, and fit very well.
However, on certain pages, #info won't be present. When it's the case, obviously, #contents doesn't scale to fit all the page.
The most obvious solution was to give #contents no fixed width so it'd scale, and change #info to be float:right. Past the minor other changes it required, it didn't have exactly the desired behavior, since it breaks the column-like layout when #contents is taller than #info:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
| +---------+
| |
+---------------------------+
Even worse, inside #contents, there are other <div>s with the border-bottom property set, and the border passes right through #info too in the following fashion:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------|-|-------|
| | +-------+
| +---------+
| |
+---------------------------+
So, considering all this, how can I give #info a fixed width, have it float to the right of #contents, but keep the column-like design and have #contents occupy the whole screen when #info isn't there, all of this making sure there are no visual artifacts, and without resorting to more than one stylesheet?
This would be the desired result on a page where both #contents and #info are present:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------| | |
| | +-------+
|-----------------|
| |
+-----------------+
And this is the desired result on a page where only #contents is present:
+---------------------------+
| #contents |
|---------------------------|
| |
|---------------------------|
| |
+---------------------------+
I hope this wasn't too confusing. I'm out of brain power.

Answer 1

Float your #content div too, it stops it from leaking like you're having, and it will fill the entire page when #info is gone. If when you dont have #info you can change #content somehow, #content could have a position relative and some right padding, with a position absolute in #info to fill its place.

Answer 2

I emailed my web teacher about it, and the answer is quite simple. It doesn't work with Internet Explorer (at least version 6), but it degrades nicely for my case.
With #info set to float:right, it suffices to have #contents set with the property overflow:hidden. And voilà.