layout and positioning
you are here
The only thing I don’t
like about this design is
that when I view the web page
on my PDA, it puts the sidebar
content above the main content,
so I have to scroll through it.
This is one of the disadvantages of the way we’ve
designed this page – because we need the sidebar to
be located just under the header and before the main
content, anyone using a browser with limited capabilities
(PDAs, mobile phones, screen readers, and so on) will
see the page in the order it is written, with the sidebar
ﬁrst. However, most people would rather see your main
content before any kind of sidebar or navigation.
So, let’s look at another way of doing this, which goes
back to your idea of using ﬂoat “left” on the main
content. While we’re exploring that, we’ll talk about
liquid versus frozen designs as well.
Right. That happens because of
the way we ordered the <div>s.
Do margins collapse on ﬂoated
No, they don’t, and it’s pretty easy to
see why. Unlike block elements that are ﬂowed
on the page, ﬂoated elements are just, well,
ﬂoating. In other words, the margins of ﬂoated
elements aren’t actually touching the margins
of the elements in the normal ﬂow, so they
can’t be collapsed.
But this raises a good point, and identiﬁes a
common error in layouts. If you have a main
content area and a sidebar, it is common to
set a top margin on each. Then, if you ﬂoat
the sidebar, it still has a margin, and that
margin won’t be collapsed with whatever is
above it anymore. So you can easily end up
having different margins on the sidebar and on
the main content if you don’t remember that
ﬂoated elements don’t collapse margins.
Can I ﬂoat an inline element?
Yes, you sure can. The best example
– and a common one – is to ﬂoat images.
Give it a try – ﬂoat an image left or right in a
paragraph and you’ll see your text ﬂow around
it. Don’t forget to add padding to give the
image a little room, and possibly a border. You
can also ﬂoat any other inline element you
like, but it’s not commonly done.
Is it correct to think about ﬂoated
elements as elements that are ignored by
block elements, while inline elements know
they are there?
Yes, that’s a good way of thinking
about it. Inline content nested inside a block
element always ﬂows around a ﬂoated
element, observing the boundaries of the
ﬂoated element, while block elements are
ﬂowed onto the page as normal. The
exception is when you set the clear property
on a block element, which causes a block
element to move down until there are no
ﬂoating elements next to it on the right, left or
both sides, depending on the value of clear.