|
Posted by Ben C on 01/04/08 22:32
On 2008-01-04, Fister <nej@tak.dk> wrote:
> Hello Ben,
>
>> Put another div around #something-else, with clear: both and
>> padding-top: 1px set on it.
>
> Thank you very much for the code. At first it worked but now I've
> added another two columns to the left and right which causes problem
> with clear: both. Could you / anyone help me? I think this should be
> easy to solve but I can't figure out how :-/
>
> Here is the code:
>
> http://www.bullamanka.dk/test.html
[...]
> #page-center-column
> {
> margin: 0 210px 0 210px;
^^^^^^^^^^^^^^^^^^^^^^^^
Get rid of this line. Replace it with overflow: hidden.
If you make the center-column overflow: hidden it becomes a Block
Formatting Context.
Regular readers of alt.html will by now be familiar with the idea of
using Block Formatting Contexts to cause containers to grow in height to
accommodate floated descendents.
But here we are using two other useful properties of BFCs:
1. The clear instruction clears floats _within the same BFC_. By making
#page-center-column a BFC, it becomes the BFC for #clear. That means
that #clear no longer clears the two big floats to the left and right
(page-left-column and page-right-column).
2. A BFC with auto width, unlike a regular block box, _itself becomes
narrower_ to squeeze between floats. A regular block box doesn't, it
occupies the full available width and its inline contents flow around
the floats. That was why you were using those 210px margins on
#page-center-column. If #page-center-column is a BFC, it no longer
wants those margins.
This is all standard CSS 2.1 (well, pretty much, the specification does
allow for #page-center-column to move below the two floats rather than
squeeze between them, but I don't know of any browsers that actually do
that).
Don't know if it works in IE.
Navigation:
[Reply to this message]
|