DIV margin: 0 auto; : div margin padding « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. div margin padding

DIV margin: 0 auto;

     
<!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-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 0px 0px;
 background: #E7DBD5;
}
#navigation {
 float: left;
 width: 900px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 0px 0px 0px 0px;
 background: #BD9C8C;
}
#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 200px;
 float: left;
}
#rightcolumn { 
 float: right;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 678px;
 display: inline;
}
#footer { 
 width: 900px;
 clear: both;
 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 Navigation -->
         <div id="navigation">
     
           This is the Navigation     
         
     </div>
     <!-- End Navigation -->
     
     <!-- Begin Left Column -->
     <div id="leftcolumn">
     
           Left Column
     
     </div>
     <!-- End Left Column -->
     
     <!-- Begin Right Column -->
     <div id="rightcolumn">
           
            <a href="#">Download this CSS Layout</a>     
     
     </div>
     <!-- End Right Column -->
     
     <!-- Begin Footer -->
     <div id="footer">
           
         This is the Footer    
          
       </div>
     <!-- End Footer -->
     
   </div>
   <!-- End Wrapper -->
   

</body>

</html>








Related examples in the same category

1.div padding: 3px;
2.div padding: 10px;
3.div padding-right: 1px;
4.Div padding: 0;
5.Div padding: 0 18px 0 8px;
6.DIV padding: 5px;
7.DIV padding: 5px 5px 5px;
8.DIV padding:0;
9.Set padding to 10px for DIV
10.Set right padding to 1px
11.div margin: 5px;
12.div::before margin-right: 25px;
13.div margin: 15px;
14.div margin: 25px;
15.div margin-right: 1px;
16.This div stretches across the whole window and has a negative margin.
17.Div margin: 0;
18.Div margin: 60px 0 0 115px;
19.Div margin-top: -1px;
20.DIV margin: 10px 0px 0px 0px;
21.DIV margin-top: 10px;
22.DIV margin-bottom: 10px;
23.DIV margin-left: 200px;
24.DIV margin: 10px 0;
25.Using negative margin for div dialog
26.Set margin to 25px for DIV
27.Set right margin to 1px