PDA

View Full Version : Filling up remaining space in a div



StewieK
Feb 2nd, 2010, 10:17 AM
My page is set up so that I have a content width of 100% (the body width is 100% as is the content div inside that). Inside that content div, I have a holder div that is set to 100% width with a padding of 10px on the left and right. Inside THAT div, there is a series of N amount of box divs (currently it's 9, but I expect this to change), each with a width of 100px.

However, one of the divs I wish to be of a variable width, i.e.:
If the user's screen is exactly 900px wide, then all 9 divs should be 100px wide.
If the user's screen is less than 900px wide, then all 9 divs should be 100px wide, providing the opportunity to scroll horizontally.
If the user's screen is MORE than 900px wide, only eight of the divs should be 100px wide. The other div should be widened accordingly. (That is, if the res is 1400px wide, it should be 600px wide, 1400-8*100.)

So far though, I haven't been able to manage anything like this.

Here is the CSS I'm using:

html, body {
height: 100%;
margin: 0px auto;
padding: 0px;
}
div.content {
width: 100%;
min-height: 100%;
margin: 0px auto;
}
div.holder {
width: 100%;
padding: 0px 10px;
}
div.box, div.widebox {
margin: 0px;
display: inline-block;
border: 1px solid #000000;
}
div.box {
width: 100px;
}
div.widebox {
/* No idea what to put here. */
}

And here is the pertinent HTML code:

<body>
<div class='content'>
<div class='holder'>
<div class='box'>Some box</div>
<!-- Numerous divs for 'box' -->
<div class='widebox'>Some box that widens to fit user's resolution</div>
<!-- Numerous divs for 'box' -->
<div class='box'>Some box</div>
</div>
</div>
</body>

An example can be found here (http://mirauge.com/uploads/Stewie/divtableproblem.html). I would like to avoid JavaScript on this particular issue if possible.

Thank you in advance!