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”
Search WWH ::

Custom Search