float: left; for right column : float « CSS « HTML / CSS

HTML / CSS » CSS » float 
float: left; for right column
  
<!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: auto;
 width: 922px;
}
#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background: #BD9C8C;
}
#leftcolumn 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#content 
 float: left;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 456px;
 display: inline;
}
#rightcolumn 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#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 Left Column -->
     <div id="leftcolumn">
     
           Left Column
     
     </div>
     <!-- End Left Column -->
     
     <!-- Begin Content Column -->
     <div id="content">
           
            <a href="#">Download this CSS Layout</a>     
     
     </div>
     <!-- End Content Column -->
     
     <!-- Begin Right Column -->
     <div id="rightcolumn">
     
           Right Column
     
     </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.'float' Example
2.float left
3.float right
4.
  • float: left;
  • 5.float: left
    6.float box model
    7.float control default margin padding
    8.float extra box properties
    9.float highlighted dimensions
    10.float highlighted
    11.float inline
    12.float inline becomes block inline
    13.float inline becomes block multiline inline box model
    14.float left and right
    15.float left and right for three columns layout
    16.float left and right with other content
    17.float: left; margin-left: -700px
    18.float: left; width: 100%
    19.p float: left;
    20.When a block level element is floated, its sizing changes from expand-to-fit, to shrink-to-fit, and is no longer subject to margin collapsing.
    21.When an inline element is floated, it becomes a block-level element with shrink-to-fit sizing.
    22.multiple floats
    23.Using floating elements to create columns
    24.columns floating left
    25.The float property is used to force content to wrap around another element.
    java2s.com  | Contact Us | Privacy Policy
    Copyright 2009 - 12 Demo Source and Support. All rights reserved.
    All other trademarks are property of their respective owners.