Mental Jetsam

By Peter Finch

Archive for February 8th, 2011

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.
<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 ;  }
<h1>Left Bar</h1>
<h1>Right Bar</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>

Posted in CSS, HTML | Leave a Comment »