HTML and CSS Reference
In-Depth Information
Solving the overlap problem
To fix our overlapping problem, we're going to use
another CSS property that you haven't seen yet: the
clear
property, and here's how it works…
div id=“header”
Here's
what we
've got
now. The
“main”
<div> is
short en
ough
that
the foot
er <div>
is comin
g
right
up and o
verlappin
g with
the si
debar <d
iv>.
div id=“main”
div id=“sidebar”
div id=“footer”
This happens b
ecause the sidebar has been pulled out of the flow.
So, the brows
er just lays out the main and footer <div>s like it
normally would
, ignoring the sidebar (although remember that when
the browser f
lows inline elements, it will respect the borders of
the sidebar an
d wrap inline elements around it).
You can use the CSS
clear
property on an element to request that as the element is
being flowed onto the page, no floating content is allowed on the left, right, or both
sides of the element. Let's give it a try…
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear: right;
}
Her
e we're a
dding a
property
to
the
footer
rule, whic
h says t
hat
no
floating
content
is allowe
d on
the
right of
the foo
ter.
div id=“header”
Now when the browser places the
elements on the page, it looks to see if
there is a floating element to the right
side of the footer, and if there is, it
moves the footer down until there is
nothing on its right. Now, no matter
how wide you open the browser, the
footer will always be below the sidebar.
div id=“main”
div id=“sidebar”
Don't even
think about putting
a floating element to
the right of me.
div id=“footer”
