Div width 100% minus fixed amount of pixels.

Question

Hi, I have some toolbars that have pretty simple structure: One wrap div that has header, content and footer divs inside. Header and footer have 3 divs inside them: left, middle and right.

To get a better idea of the structure, check this image: http://ezmundorf.110mb.com/toolbars.png

Reason for the structure is that I need rounded corners for the toolbar. That's why there's left and right div within header and footer.

Right now I'm using a fixed size for every single element. I'd want the middle divs of header and footer to scale with the content.

Since content gets a width, it scales the parent div to have the same width, now if I use 100% width for the divs I want to scale, they go over the other divs in the same parent, so I would need to set 100% width minus fixed amount of pixels (width of corner divs).

Can't find a way to do it. With javascript it wouldn't be hard, but I'd rather keep js out of my stylesheets.

Answer 1

what if your wrapping div was 100% and you used padding for a pixel amount, then if the padding # needs to be dynamic, you can easily use jQuery to modify your padding amount when your events fire.

Answer 2

In some contexts, you can leverage margin settings to effectively specify "100% width minus N pixels". See the accepted answer to this question.

Answer 3

You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a div element is auto, which means that it uses the available width. You can then add padding to the element and it still keeps withing the available width.

Here is an example that you can use for putting images as left and right rounded corners, and a center image that repeats between them.

The HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

The CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

Answer 4

The usual way to do it is as outlined by Guffa, nested elements. It's a bit sad having to add extra markup to get the hooks you need for this, but in practice a wrapper div here or there isn't going to hurt anyone.

If you must do it without extra elements (eg. when you don't have control of the page markup), you can use box-sizing, which has pretty decent but not complete or simple browser support. Likely more fun than having to rely on scripting though.