CSS 3 DIVs in a row : 2 fix 1 auto adjust

Question

Hi,

I am trying to figure out how to create 3 divs and have them lineup in the same row. Having 1st and 3rd one fixed width at 100px and have the 2nd (middle) one audo adjust its width in case of browser resize.

<div>
   <div id="d1"> content 1</div>
   <div id="d2"> content 2</div>
   <div id="d3"> content 3</div>
</div>

thanks,

Answer 1

You have tp use floats to align the left and right frame. But for this you have to reorder the divs as shown below, and set the margins for the middle div.

<style type="text/css">
#d1 {
  float: left:
}

#d2 {
  float: right:
}

#d3 {
  margin-left: 100px;
  margin-right: 100px;
}
</style>

<div>
   <div id="d1"> content 1</div>
   <div id="d3"> content 3</div>
   <div id="d2"> content 2</div>
</div>

Answer 2

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

Strike that, many extra divs to ensure all columns are equal height. This may be what you're looking for. All explained in this excellent article: http://www.alistapart.com/articles/holygrail