Leaving space beteen section : Section « CSS Controls « HTML / CSS






Leaving space beteen section

  
<!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" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style rel="stylesheet" type="text/css">
* { padding: 0; margin: 0; }

body {
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#header {
 width: 900px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background: #DAC8BF;
}
#navigation {
 width: 900px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 0px 0px 5px 0px;
 background: #BD9C8C;
}
#content { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
}
#footer { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}
</style>
</head>
<body>


   <!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header">
     
           This is the Header     
         
     </div>
     <!-- End Header -->
     
     <!-- Begin Naviagtion -->
         <div id="navigation">
     
           This is the Navigation     
         
     </div>
     <!-- End Naviagtion -->
     
     <!-- Begin Content -->
     <div id="content">
           
     
     </div>
     <!-- End Content -->
     
     <!-- Begin Footer -->
     <div id="footer">
           
         This is the Footer    
          
       </div>
     <!-- End Footer -->
     
   </div>
   <!-- End Wrapper -->


</body>

</html>

   
    
  








Related examples in the same category

1.3D section bar
2.Scrollable section
3.Section on the left
4.Red section title bar
5.Shading section bar
6.Line separated sections
7.Single column layout with two-level top section
8.Right section with boxes
9.Box section with dark background
10.Section title background image
11.Using Padding to add space beteen two sections
12.Even distributed section
13.Using border to highlight section title
14.Section with image title bar
15.Using border to highlight section title 2
16.Section with shading background image
17.White content area and gray outsider
18.Post by date
19.Date block
20.Read more for link set
21.Using Wider border for summary row
22.Information panel with columns of links