CODEWITHSUNDEEP
css
ajsie
ajsie

Reputation: 79686

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

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.

Upvotes: 0

Views: 3081

Answers (3)

kongaraju
kongaraju

Reputation: 9596

Now css has flexbox model.

You should read the specification to get the flexible layout of webpage

http://www.w3.org/TR/css3-flexbox/

Upvotes: 0

Joel Etherton
Joel Etherton

Reputation: 37533

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

Upvotes: 2

Sampson
Sampson

Reputation: 268344

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>

Upvotes: 2

Related Questions