HTML and CSS Reference
In-Depth Information
All other browsers set the margin at
36%
, which is a good approximation that maintains a reasonable amount of
breathing space between the sidebar and main content.
I've given the sidebar a different background color from the
wrapper<div>
to show what happens when the
sidebar is short. As Figure
12-3
shows, the sidebar's background extends only as far as the content.
Figure 12-3.
Getting columns of even height presents a challenge
I'll tackle the issue of the sidebar background shortly.
To switch the sidebar to the other side, all that's needed is to float the sidebar to the right, and to put the wide
margin on the other side of the
main<div>
like this (the code is in right2col_basic.html):
#sidebar {
width: 33%;
padding: 10px;
float:
right
;
background-color: #D3C89B;
}
#main {
margin-
right
: 36%;
margin-
right
: -moz-calc(33% + 20px);
margin-
right
: -webkit-calc(33% + 20px);
margin-
right
: calc(33% + 20px);
padding: 10px 20px;
}
Keeping the Footer in Place
Most of the time, a sidebar is likely to be shorter than the main content. However, when elements are floated,
all subsequent content moves up to fill the vacated space. As Figure
12-4
shows, the long sidebar in
left2col_long.html results in the footer moving up below the main content, leaving the sidebar protruding.
