Three Column Liquid Layout : three Columns « Layout « HTML / CSS






Three Column Liquid Layout

   
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#branding {
  height: 50px;
  background-color:#b0b0b0;
  padding: 20px;
}
#mainNav {
  list-style: none;
  background-color:#eee;
}

#secondaryContent {
  background-color:#eee;
}

#footer {
  background-color:#b0b0b0;
  padding: 1px 20px;
}

body {
  min-width: 760px;
}

#wrapper {
  width: 100%; 
  margin: 0 auto; 
}

#mainNav { 
  width: 20%;
  float: left;
}

#content { 
  width: 75%; 
  float: right; 
}

#mainContent { 
  width: 66%; 
  margin: 0; 
  float: left; 
} 
#secondaryContent { 
  width: 31%;
  min-width: 10em;
  display: inline;
  float: right; 
} 

#footer { 
  clear: both; 
}

#mainNav, #secondaryContent {
  padding-top: 20px;
  padding-bottom: 20px;
}

#mainNav *, #secondaryContent * { 
 padding-left: 20px;
 padding-right: 20px;
}

#mainNav * *, #secondaryContent * * { 
 padding-left: 0;
 padding-right: 0;
}


</style>
</head>

<body>

<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div> 

<div id="content"> 
<div id="mainContent">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div> 

<div id="secondaryContent">
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
</div>

<ul id="mainNav"> 
<li class="first"><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Clients</a></li> 
<li><a href="#">Case Studies</a></li> 
</ul> 

<div id="footer">
<p>Footer</p>
</div>


</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.Floated Three Column Layout 2
19.Faux Three Column Liquid Layout
20.Three-Column Layout Demonstration with Javascript
21.Three-Column Layout Demonstration with fixed width
22.Three-Column Layout without footer
23.Three-Column Layout with absolute position
24.Three columns: all floating from left
25.Header and sub header with three columns
26.Three columns with header and footer
27.Three columns with no header and footer
28.Three column layout with sub sections
29.float left and right three columns
30.Top and left navigational bar and three columns
31.Three Column Layout in CSS
32.Three Column Design Using HTML with Table
33.Basic 3-Column Sample Page
34.Three column with top section
35.Three column layout with two sidebar on the right
36.Three column layout with two column sidebar on the left
37.Three column layout
38.Fixed Three-Column Over Four-Column Layout
39.Three column layout with content in the middle
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