Three column layout with content in the middle : three Columns « Layout « HTML / CSS






Three column layout with content in the middle

 

<!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></title>
<style type="text/css">
#columnRight {
 width: 33%;
 float: left;
 background: white;
 padding-bottom: 1em;
}
#columnLeft {
 width: 20%;
 float:left;
 background: white;
 padding-bottom: 1em;
 text-align: justify;
}
#columnMain {
 width:47%;
 float:left;
 background: white;
 padding-bottom: 1em;
}
#footer {
 clear: both;
 padding-bottom: 1em;
 border-top: 1px solid #333;
 text-align: center;
}
</style>
</head>
<body>
<div id="header">
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
</div>
<div id="columnLeft">
  <h3>Navigation</h3>
  <p>
  <ul>
  <li><a href="">Quisque facilisis</a></li>
  <li><a href="">Nam malesuada ornare dolor</a></li> 
  <li><a href="">Cras gravida</a></li> 
  <li><a href="">Diam sit amet</a></li>
  <li><a href="">Rhoncus ornare</a></li> 
  </ul>
  </p>
</div>
<div id="columnMain">
<p>  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
</div>
<div id="columnRight">

  <p>Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam.</p>
</div>

<div id="footer">
  <p>Proin at eros non eros adipiscing mollis. </p>
</div>
  
</body>

</html>

   
  








Related examples in the same category

1.Header and three columns under
2.Column left, column main, column right
3.Three columns with navigation on the right
4.Use left property to control the column position
5.three column layout with header and footer
6.Three column layout with absolute position
7.Use absolute position to create header and three column under it
8.Use margin to layout the center column
9.Three columns, left and right column has abolute position
10.3 columns, all fluid
11.3 column
12.3 Column fluid layout: 50% column, 2 x 25% columns
13.3 column fluid layout - 33% columns
14.3 Column fluid layout - 25% side columns
15.Three Column Elastic Layout
16.Floated Three Column Layout
17.Three Column Hybrid Layout
18.Three Column Liquid Layout
19.Floated Three Column Layout 2
20.Faux Three Column Liquid Layout
21.Three-Column Layout Demonstration with Javascript
22.Three-Column Layout Demonstration with fixed width
23.Three-Column Layout without footer
24.Three-Column Layout with absolute position
25.Three columns: all floating from left
26.Header and sub header with three columns
27.Three columns with header and footer
28.Three columns with no header and footer
29.Three column layout with sub sections
30.float left and right three columns
31.Top and left navigational bar and three columns
32.Three Column Layout in CSS
33.Three Column Design Using HTML with Table
34.Basic 3-Column Sample Page
35.Three column with top section
36.Three column layout with two sidebar on the right
37.Three column layout with two column sidebar on the left
38.Three column layout
39.Fixed Three-Column Over Four-Column Layout
40.Three column layout with left navigation bar
41.Three column layout with left menu bar
42.Three column daliy post layout
43.Three column layout
44.Column span for three column layout
45.Three Column Layout in CSS 2
46.Three column layout with top bar
47.Three-column layout with various style illustration