This is a liquid design,
so percentages must be used, and they must add up to 100%.
#mainContent {
background: #ffffff url(assets/white-shadow-top.gif) 0 0 repeat-x;
float: left;
width: 50%;
}
#leftSidebar {
float: left;
width: 30%;
}
Creating flanking sidebars
PAGE LAYOUTS WITH CSS
299
7
#rightSidebar {
float: left;
width: 20%;
}
4. Position the sidebars. At the moment, the columns are in the order specified in the
code. However, via the use of margins, this order can be changed. For the main
content div, set a margin-left value equal to the width of the left sidebar. Next,
set a margin-left value for #leftSidebar that??™s the negative value of the sum of
the width and left margin values of the main content area.
#mainContent {
background: #ffffff url(assets/white-shadow-top.gif) 0 0 repeat-x;
float: left;
width: 50%;
margin-left: 30%;
}
#leftSidebar {
float: left;
width: 30%;
margin-left: -80%;
}
#rightSidebar {
float: left;
width: 20%;
}
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
300
5. Fine-tune the design. Add the three rules in the following code block to finish off
the layout and tidy things up.
.columnContentWrapper {
padding: 30px 10px;
}
#mainContent, #leftSidebar, #rightSidebar {
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
#columnWrapper {
overflow: hidden;
}
The first rule merely adds some padding to the column content wrappers. The next
rule applies a large amount of padding to the bottom of each column and a negative
margin of the same size, bringing the document flow back to the point where
the padding begins.
Pages:
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394