HTML and CSS Reference
In-Depth Information
#main {
margin-
right
: 33%;
padding: 10px 20px;
}
The preceding examples apply the background image to the
wrapper<div>
. This works fine because the
header and footer have backgrounds of their own, which conceal the faux columns. Depending on the layout, you
might need to wrap the sidebar and main content in a separate
<div>
and apply the background image to that.
■
The main drawback with putting the sidebar first is that search engines and screen readers for the blind
take longer to get to the main content. CSS table display layouts also suffer from the same problem. However, a
relatively simple solution is to create a “Skip to Main Content” link, as described at the end of this chapter.
Note
Putting the Main Content First
Although putting the sidebar first makes it easier to create a two-column layout, there are several ways to achieve
the same result with the HTML structure in the following order:
1.
Header
2.
Main content
3.
Sidebar
4.
Footer
The obvious solution is to float the
<div>
that contains the main content.
Floating the Main Content
When you float the main content, the roles are reversed. A floated element must have a declared width, so you
apply the width to the main content and a wide margin to the sidebar. Otherwise, the technique is identical to
floating the sidebar.
In left2col_mainfloat.html, the main style rules are as follows:
#sidebar {
width: 29%;
padding: 2%;
margin-right: 67%;
}
#main {
width: 63%;
padding: 10px 2%;
float: right;
}
This puts a wide right margin on the sidebar, making room for the main content to float to the right,
as shown in Figure
12-7
.
