CODEWITHSUNDEEP
css
Eatdoku
Eatdoku

Reputation: 6961

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

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,

Upvotes: 7

Views: 14276

Answers (5)

AxelEckenberger
AxelEckenberger

Reputation: 16926

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="d2"> content 2</div>
   <div id="d3"> content 3</div>
</div>

Edit

Thanks to Leniel Macaferi for pointing out an error. The correct order of the divs has to be floating divs first, then non floating divs. Therefore I corrected the code (exchanged div d2 and div d3).

Upvotes: 5

Bram Vanroy
Bram Vanroy

Reputation: 28505

Just putting this out there as a modern, clean solution: use calc. Fiddle: http://jsfiddle.net/bg7KS/

#d2 {
    width: 200px; /* fallback older browsers */
    width: -webkit-calc(100% - 200px);
    width: -moz-calc(100% - 200px);
    width: calc(100% - 200px);
}

Upvotes: 1

himanshupareek66
himanshupareek66

Reputation: 846

Div is a block-level element, so its a nice option to handle with the help of its Display Property.

<div id="d1" style="display:inline-block; width:100px;">content1</div>
<div id="d2" style="display:inline">content2</div>
<div id="d3" style="display:inline-block; width:100px;">content3</div>​

Upvotes: 3

Captain Sensible
Captain Sensible

Reputation: 1

nvm this is old, i was gonna post what worked for me

    <style type="text/css">
#d1 {

  float: left;
  margin-left: 50px;

}

#d2 {
  float: center;
  margin-right: 5px;
}

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

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

Upvotes: 0

ghoppe
ghoppe

Reputation: 21794

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

Upvotes: 4

Related Questions