Four column layout in HTML and CSS

Description

The following code shows how to four column layout.

Example


<!--from  w  ww .jav a  2s  .com-->




<html>
<head>
<title>4 Column</title>

<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-bottom: 10px;
overflow: auto;
width: 100%
}
#header {
color: #333;
width: 902px;
padding: 10px;
height: 100px;
margin: 10px 0px 0px 0px;
background: #D1DBDB;
}
#navigation {
color: #333;
padding: 10px;
margin: 0px 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;
}
#footer {
width: 902px;
clear: both;
color: #333;
background: #ABBEBE;
margin: 0px 0px 10px 0px;
padding: 10px;
}
.clear { clear: both; background: none; }
</style>


</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<h1>Free CSS Layouts</h1>
</div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation"> Navigation Here </div>
<!-- End Navigation -->
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
<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 Left Column -->
<!-- Begin Left Middle -->
<div id="leftmiddle">
<h1>Faux Column CSS Layouts</h1>
<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 Left Middle -->
<!-- Begin Right Middle -->
<div id="rightmiddle">
<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 Right Middle -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<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 Right Column -->
<div class="clear"> </div>
</div>
<!-- End Faux Columns -->
</div>
<!-- End Wrapper -->
</body>
</html>

Click to view the demo

The code above generates the following result.

Home »
  HTML CSS Tutorial »
    Layout »
      Position

...
Top Align Static Block in HTML and CSS
Top offset Static Block in HTML and CSS
Align Center for static block in HTML and C...
Align Left and top for Static Block in HTML...
Align Right for static block in HTML and CS...
Bottom Align Static Block with margin-botto...
Center Static Block in HTML and CSS
Left Align Sized Static Block with margin-r...
Right align Sized Static Block in HTML and ...
Stretch Static Block right alignment in HTM...
Place Sized Relative layout block in HTML a...
Position block to the bottom right of the r...
Use negative value in left for relative pos...
Use position relative with top and left val...
Use relative position with top and left in ...
Use relative position with top and left set...
Use relative position with top and left: va...
Clear after floating element in HTML and CS...
Clear right for above float right element i...
Compare clear both with not clear elements ...
Make a new line br to clear right in HTML a...
Make element clear from the both side in HT...
Make element overlap with clear left for fl...
Do center alignment in HTML and CSS
Do Left-top Alignment in HTML and CSS
Do Right-bottom Alignment in HTML and CSS

Four column layout in HTML and CSS

Get implied width and height when all four ...
Make container grow height as child div gro...
Make div grow as children grow in HTML and ...
One column layout with header and footer in...
One column three parts layout:header, conte...
Position Image in relation to containing el...
Right-top Align and Offset in HTML and CSS
Set display to inline table for div element...
Set top to 100px in HTML and CSS
Set up four column layout in HTML and CSS
Set width for floating left and right eleme...
...