Faux Column CSS Layouts - 4 Column - faux-42-4-col : Four Columns « Layout « HTML / CSS






Faux Column CSS Layouts - 4 Column - faux-42-4-col

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Faux Column CSS Layouts - 4 Column - faux-42-4-col</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#faux {
 background: url(faux-34-4.gif);
 margin: 10px 0px;
 overflow: auto; 
 width: 100%
}
#header {
 color: #333;
 width: 902px;
 padding: 10px;
 height: 100px;
 margin: 10px 0px 0px 0px;
 background: #ABBEBE;
}
#leftcolumn { 
 display: inline;
 color: #333;
 margin:10px;
 padding:0;
 width: 205px;
 float: left;
}
#leftmiddle { 
 float: left;
 color: #333;
 margin: 10px 13px;
 padding:0;
 width: 209px;
 display: inline;
 position: relative;
}
#rightmiddle { 
 display: inline;
 position: relative;
 color: #333;
 margin: 10px 10px 10px 10px;
 padding:0;
 width: 205px;
 float: left;
}
#rightcolumn { 
 display: inline;
 position: relative;
 color: #333;
 margin: 10px 10px 10px 17px;
 padding:0;
 width: 205px;
 float: left;
}
.clear { clear: both; background: none; }
</style>


</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
  <!-- Begin Faux Columns -->
  <div id="faux">
    <!-- Begin Left Column -->
    <div id="leftcolumn">
      <p>These 4 Column Faux CSS Layouts use a background image to make it look like the  left and right columns are equal in height and independent of each other.</p>
    </div>
    <!-- End Left Column -->
    <!-- Begin Left Middle -->
    <div id="leftmiddle">
      <h1>Faux Column CSS Layouts</h1>
      <p>Semnibh sed anterdum et laorem nunc tempus temper malesuada sem consectetuer. Enimhabitae nec egest eu auctorttis in leo dui semportis ris enim. Maurissemportor commod vestibulum feugiat auctor alique nullamcorper ligula convallicitur justo orna. Sedid ut elit vestibulum sed curabitur platea justo dissim ultris sed. Sagittisquisque quisque leo dui met tellus curabitur auctor et quat loreet.</p>
    </div>
    <!-- End Left Middle -->
    <!-- Begin Right Middle -->
    <div id="rightmiddle">
      <p>Etsemper tristiquat orci ligula ligula vitae netus justo tellus nulla elit. Temporid interdum partur gravida justo nequam sem fuscing malesuada vitae lacus. Pellentesquenunc non tincidunt lacilis donec vel purus maecenatis eu sed urna. Ideu justo hac eros sed eros mattitor quis vestibus magnisl nisl. Nullanequam egestas facilisi orci sodales ut ac molesuada interdum tincidunt scetus.</p>
    </div>
    <!-- End Right Middle -->
    <!-- Begin Right Column -->
    <div id="rightcolumn">
      <p>Nullaet ligula ut ant elit sed condiment elit quis urna laoreet. Fringpor aliquam justo dui nec morbi sed diculis ipsum elit temportis. Ultrisiacus ut curabitae orci nulla curabitur leo nunc lor sapien ligula. Diamquis sagittitor quat vitae leo ipsum id vivamus sodalesuada por gravida. Sedet rutrum pellus tellus vel nonummy tincidunt urna purus malestibulum adipis.</p>
      <ul style="margin:0 0 15px 0; padding:0; list-style-type:none;">
        <li style="margin-right:15px; display:inline;"><a href="#">Free CSS Templates</a></li>
        <li style="margin-right:15px; display:inline;"><a href="#">Free CSS Layouts</a></li>
        <li style="margin-right:15px; display:inline;"><a href="#">Code Sucks</a></li>
      </ul>
    </div>
    <!-- End Right Column -->
    <div class="clear"> </div>
  </div>
  <!-- End Faux Columns -->
</div>
<!-- End Wrapper -->
</body>
</html>

   
    
  








Related examples in the same category

1.Main title with four columns under
2.Four columns with absolute position
3.4 columns, all fluid
4.Four columns with footer
5.four column with float, and a footer with clear both
6.Four columns with footer 2
7.Four columns with footer 3
8.Faux Column CSS Layouts - 4 Column - faux-39-4-col
9.Faux Column CSS Layouts - 4 Column - faux-40-4-col
10.Faux Column CSS Layouts - 4 Column - faux-41-4-col
11.Four even columns with two level header
12.Four column layout