Question

I have 3 divs in one row

<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>

here’s how its layed out

I need the middle div to stay a fix width, but the left and right divs to shrink in as the screen gets smaller, heres an example

how would I write out the css?

this is how I have it so far, and by the way the 3 divs are wrapped in another div#mid

#mid {
max-width: 100%;
min-height: 395px;
max-height: 395px;
position: relative;
background-color: #F00;
display: block;
}

#left {
min-width:35%;
min-height: 395px;
max-height: 395px;
background-color: #00F;
position:relative;
float: left;
}

#middle {
min-width:30%;
min-height: 395px;
max-height: 395px;
background-color: #3F0;
position:relative;
float: left;
}

#right {
min-width:35%;
min-height: 395px;
max-height: 395px;
margin:0;
padding:0;
background-color: #0FF;
position:relative;
float: left;
}
if anyone can help me out id really appreciate it, thanks in advance!

Answer 1

Here I’ve answered this question, you can do it like this : My Fiddle

<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: 300px;  
}

.third {
    background-color: #c00000;   
}

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