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

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, th开发者_C百科is 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.

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.

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à.