how to make 2 fixed-width sidebar div and 1 flexible-width main div?

Question

basically my html code looks like:

 <div id="leftbar"></div>
 <div id="content"></div>
 <div id="rightbar"></div>

how do i code it with css so that the all 3 divs will be side by side and leftbar and rightbar have a fixed width while content will be flexible to fill out the webbrowser.

Answer 1

Float the leftbar left, and give content a margin-left value equal to (or greater than) the width of the leftbar. Float the rightbar right, and give content a margin-right value equal to (or greater than) the width of rightbar.

.nav1    { width:200px; float:left; }
.nav2    { width:200px; float:right; }
.content { margin:0 210px; }
.clear   { clear:both; }

--

<div id="wrapper">
  <div class="nav1">Main Nav Items</div>
  <div class="nav2">Other Nav Items</div>
  <div class="content">Content goes here</div>
  <div class="clear"></div>
</div>

Answer 2

Try this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

How about this one: http://www.glish.com/css/7.asp