HTML and CSS Reference
In-Depth Information
wrapper
inner
Main Content
Sidebar 1
Sidebar 2
Figure 12-9.
Two of the three columns are wrapped in an inner container
■
The success of this layout depends on the right sidebar never being longer than either of the other
two columns.
Note
You need to do a little preparation work to create a responsive three-column layout. First, you need to
decide how wide you want the sidebars to be. For the example in threecol.html, I set the maximum width of the
wrapper<div>
to
1200px
, and decided to allocate
300px
to each sidebar. Because the right sidebar is nested inside
the
wrapper<div>
, its overall width (including padding) needs to be
25%
. However, the left sidebar is nested
inside the
inner<div>
, so its overall width needs to be calculated with regard to its parent. At maximum width,
the
inner<div>
is
900px
wide, which means the left sidebar needs to occupy
33.33%
of its parent's width.
To fill the background of each column, you need two images. The first image creates the backgrounds for
the left sidebar and main content, and is applied as the background to the
inner<div>
. It needs to be at least as
wide as the
inner<div>
, with the sidebar background covering the left third, and the main content background
covering the remaining two-thirds. The second image creates the background for the right sidebar, and is applied
to the
wrapper<div>
. It needs to be at least as wide as the maximum size of the
wrapper<div>
. In this example,
the right sidebar is
25%
of the total width, so the sidebar background covers the right
25%
of the image. The
remaining
75%
of the image should be transparent. Although the left three-quarters of the background image is
covered by the
inner<div>
, it becomes visible if the right sidebar is longer than the other two columns.
The styles that control this three-column layout in threecol.html look like this:
#wrapper {
width: 100%;
min-width: 800px;
max-width: 1200px;
margin: 0 auto;
background-color: #FFF;
background-image: url(images/threecol right.png);
background-position: 75% top;
background-repeat: repeat-y;
border-left: #252017 solid 1px;
border-right: #252017 solid 1px;
}
