How To Auto Adjust Left/right Div Tags Width To Fit The Screen Whilst Keeping The Middle Div Width Static

Hi how do I get div 'one' and div 'three' auto adjusted to screen side whilst keeping div 'two' width static in css? all three divs should be in the same row my HTML goes as this;

Solution 1:

You can do it like this My Fiddle

HTML

<div class="container">
<div class="first"></div>
<div class="static"></div>
<div class="third"></div>
</div>​

CSS

.container {
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-align:stretch; 
     display:-moz-box;      
    -moz-box-orient:horizontal;
    -moz-box-align:stretch;
    display:box;
    box-orient:horizontal;
    box-align:stretch;   
    color: #ffffff;    
}    

div {
    height: auto;
}

.first {
    background-color: #546547;   
}

.static {
    background-color: #154d67;
    width: 660px;  
}

.third {
    background-color: #c00000;   
}

.first, .third {
    -webkit-box-flex:1.0;
    -moz-box-flex:1.0;
    box-flex:1.0;
}
​

Solution 2:

First of all, make sure you match the ids. thr is not the same as three.

The changes I've done to the css:

1. Indent it. It's good practice.
2. Declare widths of the divs in percentage of the parent div's size. You hadn't declared the widths at all.
3. Added a little padding, so that the 3 inner divs stay at the center of the outer div

Here's the CSS:

#x 
 {
  position:relative;
  padding:1.5px;
  height:34px;
  border:1px solid gray;
 }
#one 
 { 
  height:30px;
  border:1px solid red;
  width:33%;
  float:left; 
 }
#two 
 {
  height:30px; 
  border:1px solid green; 
  width:33%;
  float:left;
 }
#three 
 {
  height:30px;
  border:1px solid blue;
  width:33%;
  float:left;
 }