HTML and CSS Reference
In-Depth Information
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.
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;
Search WWH ::

Custom Search