siderbar float right : Siderbar « CSS Controls « HTML / CSS
- HTML / CSS
- CSS Controls
- Siderbar
siderbar float right
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#container {
width: 760px;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
#content {
margin-right: 215px;
}
#sidebar_a {
float: right;
width: 200px;
margin: 0;
}
#footer {
clear: both;
}
#banner h1 {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<h1>Main Page Productions</h1>
</div>
<div id="sidebar_a"><h2>Headline goes here</h2>
<p>before <a href="">D</a> after <a href="">after</a>
text.</p></div>
<div id="content">
<h2>Headline goes here</h2>
<p>before <a href="">D</a> after <a href="">after</a>
text.</p></div>
<h3>Headline goes here</h3>
<p>before <a href="">D</a> after <a href="">after</a>
text.</p></div>
<h4>Headline goes here</h4>
<p>before <a href="">D</a> after <a href="">after</a>
text.</p></div>
</div>
<div id="footer">Lorem ipsum dolor sit amet, consectetuer adipiscing <br />elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</body>
</html>
Related examples in the same category