Centre an element of no specified width : position relative : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » position relative »

Centre an element of no specified width


 


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

#wrapper{
  position:relative;
  width:70%;
  background:#ccc;
  position:relative;
  border:1px solid #000;
  height:200px;
}
#test{
    position:absolute;
    left:50%;
}
#testinner{
  position:relative;
  left:-50%;
  background:#aaa;
  border:1px solid #000;
}

</style>
</head>
<body>
<h1></h1>
<div id="wrapper"> 
  <div id="test"> 
    <div id="testinner"> 
      <p>This is some content width no specified width<br />for testing purposes</p>
    </div>
  </div>
</div>
</body>
</html>