HTML and CSS Reference
In-Depth Information
When overflow is hidden , the content that does not fit in the box is not displayed at all.
Both scroll and auto add scrollbars to enable users to view the entire contents of the
box. When the setting is scroll , the scrollbars are always displayed, whereas when the
setting is auto , the scrollbars display only if needed. When overflow is visible, content
that overflows the box is not taken into account when laying out other items on the page
and the overflow content bleeds onto other content on the page. When you are sizing ele-
ments on the page manually, you should always account for potential overflow so that it
doesn't break the layout of your page.
Normally, block-level elements flow down the page from top to bottom. If you want to
alter the normal flow of the page, you can use absolute positioning, which I discuss in a
bit, or you can use the float property. The float property is used to indicate that an ele-
ment should be placed as far as possible to the left or right on the page, and that any
other content should wrap around it. This is best illustrated with an example. First, take a
look at the page in Figure 8.12.
A page with no
floating elements.
As you can see, the three boxes run straight down the page. I've added a border to the
first box, but that's it. Here's the source code to the page, with the addition of a few addi-
tional properties that demonstrate how float works:
<!DOCTYPE html>
<title> Floated Elements </title>
Search WWH ::

Custom Search