nested float : float : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » float »

 

nested float


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>

<style type="text/css">
  #main {
    border:1px solid #000
    background:#ccc;
    }
  #main #menu {
    border-left:1px solid #000
    border-bottom:1px solid #000;
    float:right;
    width:230px;
    background:#eee;
    margin:0px 0px 10px 10px;
    }
    
  p,h1,pre {
    margin:0px 10px 10px 10px;
    }
    
  h1 {
    font-size:14px;
    padding-top:10px;
    }
  
  #menu p font-size:10px}
  
</style>
</head><body>

<div id="main">
  <div id="menu">
    <h1>menu</h1>  
  <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. 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>
  <h1>nested float</h1>
  <h1>main</h1>
  <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>
  <br />
</div>

</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» float