Topic: [box model] percentages fighting pixels (Page 1 of 1)

Hello there,

I'm wondering if there's a way to set the width or height attribute to a certain percentage and substract the paddings and borders ( both in pixels ) to that percentage ? I especially ask this to make sure an attribute set to 100% won't bring useless scrollbars due to padding and/or borders.

Thanks in advance.

Mathieu "POÏ" HENRI

Currently, no. It's a problem that's persisted since the beginning of CSS, and a frustration to many a designer.

The only way I can think of to accomplish this: nest a div within a div, set the outer div's width in percentages, and apply the padding to the inner div. It is a structural hack, so I'll leave it up to you to decide if it's necessary or not.

When CSS-3 rolls out, we'll be able to use the new "box-width" and "box-height" for precisely the situation you've described. Given the current rate of browser development, however, this won't become a reality anytime in the decade, so don't hold your breath.

ozphactor: Damn it! I'm just trying to learn more about CSS. I'd prefer to avoid the structural box in a box hack. Add to that that if the inner div's width is set to 100% the same problem will then occur to it.

[mode 'sorry I had to say that' ON] IMHO, IE's box model makes much more sense than the CSS's one. My ridiculously simple problem is the perfect illustration of that. What did the CSS commitee had between their 2 ears to not think to that [mode 'sorry I had to say that' OFF]

Thank you for the confirmation and the infos about CSS 3.

Mathieu "POÏ" HENRI

quote:

---

Add to that that if the inner div's width is set to 100% the same problem will then occur to it.

---

Just to clarify: you wouldn't need to specify the width of the inner div, because you had already specified it for the outer one. The inner one would automatically expand to fill all the available space, and padding would be, in effect, "subtracted."

quote:

---

IMHO, IE's box model makes much more sense than the CSS's one. My ridiculously simple problem is the perfect illustration of that. What did the CSS commitee had between their 2 ears to not think to that

---

An opinion shared by many. Again, the W3C realized this, and they have it slated for CSS-3.