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.
Float
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.
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:
Input
▼
<!DOCTYPE html>
<html>
<head>
<title>
Floated Elements
</title>
