HTML and CSS Reference
In-Depth Information
#navigation {
width:25%;
float:left;
padding-top:15px;
}
#related {
float:right;
width:25%;
}
#related ul{
margin:0;
padding-left:15px;
}
#related h2 {
font-size:large;
}
#footer {
clear:both;
}
■
Note
We're applying our third column to the liquid layout that we discussed earlier. Also notice that we've
added just a smidgen of style to the links in the right column to remove some of the default padding in the
list items.
The body of the page has also changed to accommodate the new links in the added column:
<body>
<div id="wrapper">
<div id="header">
<img src="swanky-header-graphic.gif" alt="Swanky header graphic"
➥
width="377" height="41" />
</div>
<div id="content-wrapper">
<div id="content-inner">
<p>We flew with Czech Airlines ... </p>
</div>
<div id="related">
<h2>Related Links</h2>
<ul>
<li><a href="/prague/">Prague diary</a></li>
<li><a href="/sydney/">Sydney diary</a></li>
<li><a href="/italy/">Italy diary</a></li>
</ul>
</div>
</div>
