HTML and CSS Reference
In-Depth Information
Q:
Is it correct to think about floated elements as elements
that are ignored by block elements, while inline elements know
they are there?
A:
Yes, that's a good way of thinking about it. Inline content
nested inside a block element always flows around a floated element,
observing the boundaries of the floated element, while block elements
are flowed 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 floating elements next to it on the
right, left, or both sides, depending on the value of clear.
Q:
Can I float an inline element?
A:
Yes, you sure can. The best example
—
and a common
one
—
is to float images. Give it a try
—
float an image left or right in a
paragraph and you'll see your text flow around it. Don't forget to add
padding to give the image a little room, and possibly a border. You
can also float any other inline element you like, but it's not commonly
done.
The only thing I
don't like about this design is
that when I view the web page on
my smartphone, it puts the sidebar
content above the main content, so I
have to scroll through it.
Right. That happens because of the
way we ordered the <div>s.
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, small mobile devices, screen readers, and so
on) will see the page in the order it is written, with the
sidebar first. 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 float “left” on the main
content.
