HTML and CSS Reference
In-Depth Information
Putting the Sidebar First and Floating It to One Side
The basic technique is to divide the page into four sections using
<div>
tags (or HTML5 semantic elements), and
then wrap the whole page in an outer
<div>
, which controls the overall width and centers the layout. The order of
elements in the HTML markup looks like this:
1.
Header
2.
Sidebar
3.
Main content
4.
Footer
To display the sidebar on the left, set a wide left margin on the main content
<div>
, and float the sidebar to
the left. The wide margin prevents the main content from filling the full width of the outer
<div>
when the sidebar
comes to an end. The basic styles for the two-column layout in left2col_basic.html look like this:
#wrapper {
width: 100%;
min-width: 550px;
max-width: 1000px;
margin: 0 auto;
background-color: #FFF;
}
#sidebar {
width: 33%;
padding: 10px;
float: left;
background-color: #D3C89B;
}
#main {
margin-left: 36%;
margin-left: -moz-calc(33% + 20px);
margin-left: -webkit-calc(33% + 20px);
margin-left: calc(33% + 20px);
padding: 10px 20px;
}
The
wrapper<div>
tries to fill the entire width of the viewport, but the
min-width
and
max-width
properties
constrain it within a range of
550-1000px
to prevent the columns from becoming too narrow or too wide.
The
<div>
has a white background, and is centered when the viewport exceeds the maximum width.
■
Setting the maximum width of the
wrapper<div
>
to
1000px
makes it easy to work with percentages
because
1%
is exactly
10px
.
Tip
The sidebar has a width of
33%
and is floated left inside the
wrapper<div>
.
The left margin of the
main<div>
needs to be wide enough to accommodate the sidebar, which has
10px
of padding on both sides. The ideal way to handle this is to use the CSS3
calc()
function (see “Using the calc()
Function to Compute Length Values” in Chapter 3) to add the padding to the width. The
#main
style rule has
four values for
margin-left
. Browsers that have implemented
calc()
, such as IE 9+ and Firefox 16+, use the last
value:
calc(33%
+
20px)
. WebKit-based browsers and older versions of Firefox use the browser-specific prefixes.
