Two column with negative margin : Two columns : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » Two columns »

Two column with negative margin


 

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer{
  width:480px;
  float:left;
}
#inner{
  background:#ccc;
  float:right;
  width:200px;
  position:relative;
  margin:-1px -199px -1px 0;
  left:20px;
}
#inner2{
  float:left;
  width:480px;
  position:relative;
  margin-left:-478px;
  left:-20px;
}
* html #inner2{
   margin-right:-3px;
}
.clearer{
  height:1px;
  overflow:hidden;
  margin-top:-1px;  
  clear:both;
}
</style>
</head>
<body>
<div id="outer"> 
  <div id="inner"> 
    <div id="inner2"> 
      <p>this is a test. this is a test. this is a test. </p>
    </div>
    <p>this is a test. this is a test. this is a test. this is a test. </p>
    <div class="clearer"></div>
  </div>
</div>
</body>
</html>