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à.
精彩评论