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

Custom Search