Negative Margins example : Navigation Bar « CSS Controls « HTML / CSS
- HTML / CSS
- CSS Controls
- Navigation Bar
Negative Margins example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Negative Margins example</title>
<meta http-equiv="Content-Type" content-wrapper="text/html; charset=ISO-8859-1" />
<style type="text/css">
#wrapper {
text-align: left;
width: 770px;
margin: 10px auto 0 auto;
border: 1px solid silver;
}
#header {
background: red;
padding: 10px 15px 10px 13px;
}
#content-wrapper {
width: 100%;
background: gold;
float: left;
margin-right: -200px;
}
#content-inner {
margin-right: 200px;
padding: 5px 15px 0 15px;
}
#navigation {
width: 200px;
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content-wrapper">
<div id="content-inner">
<p>this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. </p>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="">Day 1</a></li>
<li><a href="">Day 2</a></li>
<li><a href="">Day 3</a></li>
<li><a href="">Day 4</a></li>
<li><a href="">Day 5</a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category