Mental Jetsam

By Peter Finch

3 column HTML page layout with fixed left and right sidebars using CSS

Posted by pcfinch on February 8, 2011

The following is a simple 3 column HTML page layout using CSS (no tables) so that the left and right “sidebars” have a fixed size and the content expands and contracts to fit the remaining page width.

There are a couple of “tricks” to get this working.

  • Use “float:left” and “float:right” to position the left and right sidebars.
  • The “lbar” and “rbar” divisions MUST appear before the “middle” division.
  • [Optional] Remove the margin from the h1 heading “margin:0” otherwise it looks odd on some browsers if it’s the first element in the division.
<html><head>
<style type="text/css">
body { font-size:10pt }
.lbar { float:left ; width:120px; background-color:yellow }
.rbar { float:right ; width:120px; background-color:yellow }
.middle { margin-left:130px; margin-right:130px; background-color:gray }
h1 { margin:0; font-size:12pt; background-color:blue ; color:white ;  }
</style>
</head><body>
<div>
<h1>Left Bar</h1>
<ul><li>Home</li>
<li>Development</li>
<li>Dowload</li>
<li>Support</li></ul>
</div>
<div>
<h1>Right Bar</h1>
<ul><li>Peter</li>
<li>Steve</li>
<li>Andrew</li>
<li>Chris</li></ul>
</div>
<div>
<h1>Middle</h1>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<p>
</div>
</body></html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: