HTML and CSS Reference
In-Depth Information
If two consecutive elements are floated the same way and not cleared,
then as long as there's available width, they sit alongside each other.
But if the second has clear set, it drops below the first element.
Let's create this simple layout with
CSS floats. The sidebar is floated left,
the main content is floated right, and
the footer is set to clear both of them.
Widths are set on the sidebar and the
main content to ensure that there's
room for them to sit side by side.
The markup and CSS for this layout
follow. Some additional CSS is used,
but not shown, to add borders,
margin, and padding to the elements.
Copy the code from the earlier
examples if you're following along:
<div id="header">
<img src="dust-puppy.svg">
<h1>Heading</h1>
</div>
<div id="main">
<p>I never am really
satisfied...</p>
</div>
<div id="sidebar">
Side bar
</div>
<div id="footer">
<div id="nav">
<a href="/l1">Link 1</a>
<a href="/l2">Link 2</a>
</div>
<div id="smallprint">Credits</div>
</div>
#header img {
float: right;
}
#header h1 {
margin-right: 150px;
}
#main {
float: right;
width: 60%;
}
#sidebar {
float: left;
width: 25%;
}
#footer {
clear: both;
}
#footer > div {
display: inline;
}
Search WWH ::




Custom Search