I have a box that has 3 divs in it. I made a picture below, the two outside divs I have set widths that I need them to be but the middle div I want to be fluid and fill to what ever the remaining width is.
The code for this will be used on different pages that have different width's so I would like the middle to always adjust based on to fill the remaining width.
The way to do this with out breaking a line is to use display: table-cell. To assure the spacing will work properly you should wrap the divs in a container and set a max-width on the container. Then find the remaining width of the middle box: 65+185 = 250. 800 (my max-width example) - 250 = 550. 550/800 = 68.75%. Set that percentage as the middle box and it will be completely fluid. Box 3 won't break to the next line no matter how small the browser gets.
CSS
.container{ max-width: 800px } .box1{ width: 65px; height: 50px; background: black; display: table-cell; vertical-align: top; } .box2{ width: 68.75%; height: 50px; background: green; display: table-cell; vertical-align: top; } .box3{ width: 185px; height: 50px; background: yellow; display: table-cell; vertical-align: top; } HTML
<div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> 
Possible solution:
This is the css
main { width:100% } left { display:inline-block; width: 65px; height: 291px; background-color:#0000ff; } middle { position:absolute; display:inline-block; background-color:#ffff00; height: 291px; margin-right:185px } right { float:right; height: 291px; background-color: #ff0000; width: 185px; } And the html:
<div class="main"> <div class="left"></div> <div class="middle"> blablabla </div> <div class="right"></div> </div> You can find a working sample here: http://jsfiddle.net/mLJLr/1/
Use this css:
#left { float:left; width:65px; background-color:#ff0000; } #center { float:left; width:100%; max-width: initial; background-color:#00AA00; } #right { float:right; width: 185px; background-color:#00FF00; } And this Html:
<div id="center"> <div id="left"> left </div> center <div id="right"> right </div> </div> Test Online: http://jsfiddle.net/9PFPm/
