Negative Margins example

Negative Margins example : Navigation Bar : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » Navigation Bar »


 

<!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>