CSS Layouts - Pro CSS Techniques - page 115

<ul>
<li><a href="day1.html">Day 1 (arrival)</a></li>
<li><a href="day2.html">Day 2 (kutna Hora)</a></li>
<li><a href="day3.html">Day 3 (Prague Castle)</a></li>
<li><a href="day4.html">Day 4 (up the towers, Karlstejn Castle)</a></li>
<li><a href="day5.html">Day 5 (Metro tour)</a></li>
</ul>
</div>
</div>
</body>
This page has an outer container ( wrapper ), which contains a header (for the header
graphic) and then the page content ( content-wrapper ). The content-wrapper div contains two
child elements: one for the content itself and one for the navigation section. All of these ele-
ments are distinct and unique, and as such have been given id attributes, which we can refer
to in the CSS accordingly in order to style and lay out the page. For the purposes of these
examples, we're going to focus on the layout and positioning aspects and not get hung up on
the styling of the text (Chapter 9 will go into more detail about styling text).
Here is the CSS that will set the specific areas of the page where we want them. Note the
parts in bold that show the layout aspects at play here:
body {
margin:0;
padding:0;
text-align:center;
background: #f0f0f0 url(body-bg.gif) repeat-x top;
}
#wrapper {
text-align:left;
width:770px;
margin:10px auto 0 auto;
position:relative;
}
#header {
background: #272727 url(header-bg.gif) repeat-x bottom left;
padding:10px 15px 10px 13px;
}
#content-wrapper {
width:570px;
background:#fff url(nav-to-content-trans.gif) repeat-y left;
position:absolute;
left:200px;
}
#content-inner {
padding:5px 15px 0 15px;
}