subtract from height:100%? 2

[shadedecho]

I know there are a million and one posts and websites about people trying to achieve various layout things and setting html/body to height:100% and bottom floating footers and all that jazz.

My CSS problem is similar to all that, but has nothing to do with the out-and-out size of the page/viewport/window. So, all those pages and posts unfortunately don't really afford me a solution that I've found to work.

I have a parent div ("A") that I want to put an iframe (or another div) inside of ("b").

I want "b" to be 100% of the width and height of "A", except minus some area on either side and top and bottom (say 5px all the way around).

I've got the width-sizing (left/right area) of "b" working, by saying "width:100%;margin-left:5px;margin-right:5px;". It seems to pull in the sides of "b" appropriately inside of "A".

However, "height:100%;margin-top:5px;margin-bottom:5px;" for "b" doesn't work the same. It doesn't subtract the 10px from the 100% height like it does with the width. It just respects the top-margin and moves it down 5px inside of "A", but then pushes the bottom of "b" 5px outside the bottom of "A".

So, technically that takes care of the top area. But what to do about the bottom, as now "b" sticks out 5px BELOW the bottom of "A"?

So, the crux of all this is, I really need some clever CSS way of actually forcing the height:100% to SUBTRACT some value (by way of borders, padding, margins, something!).

I have been successful at this following hack, but as you'll see further down, it doesn't accomplish really what I need, it just looks visually like it does.

------------------------
I can instead move "A" up with a negative margin-top, and push "b" down with respect to the top of "A" -- by "b" having a positive margin-top (or padding). Combined with an "overflow:hidden" on parent "A", I do get a clipping of "b" that's fully constrained visually to the area I want -- that is a 5px gutter around "b" inside of "A".

BUT -- here's the catch -- "b" is not really the height desired... it's actually 10px taller than desired, which means that if any content inside of "b" were to stretch larger than the height of "b", and it were to have "overflow:auto" on it to force scrollbar(s) to appear, then the bottom 10px of the scrollbar controls would be hidden by the "overflow:hidden" of the parent "A".

so, again, the height of "b" is the real problem... not just making "b" visually look a certain height.

--------------------

Anyone have any thoughts or clever tricks?

 

[Vragabond]

What is the size of A? If A has a real height and width (not again with the percentage), you could simply do:

A {
  width: 800px;
  height: 600px;
  padding: 5px;
}

b {
  width: 100%;
  height: 100%;
}

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[shadedecho]

Thank you vragabond. However, it doesn't seem to work as you say. I'd already tried a variation of that, but just for kicks I tried it again. It didn't work.

I've put up this test page to demonstrate:

http://www.getify.com/infobox/test-boxmodel.html

Notice the valid XHMTL doctype of that page.

You can see that with IE7 (standards mode), the red box should be 200x200 but instead it is 210x210. The green box should be 190x190, but is curiously 210x200!

If I remove the DOCTYPE (force into IE quirks mode), then what I get is a 200x200 red box, but a 190x200 green box, not a 190x190 like it "should" be.

Regardless of DOCTYPE, in FF3 and Webkit (Safari, Chrome, Opera), both boxes are 210x210.

 

[johnwm]

Your markup is not valid:

http://validator.w3.org/check?verbose=1&uri=http://www.getify.com/infobox/test-boxmodel.html

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[shadedecho]

johnmw-
Thanks for that catch. However, I corrected that, and the problem remains, even though the document fully validates now.

 

[ChrisHunt]

The problem is this line:

div { [b]position:absolute;[/b]display:block; }

Absolute positioning takes the inner div out of the document flow, so it no longer respects the padding of its parent.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[shadedecho]

chrishunt-
OK, so this indeed makes some progress. The problem now is the standard boxmodel issue (I believe, or perhaps, the reverse problem of the boxmodel) -- in IE7 invalid doctype (same with IE6), this renders exactly as desired, 200x200 -- meaning the padding of "A" was inside of "A".

In IE7 standards, and in all other modern browsers (regardless of doctype), this renders the outer red box 210x210 (so the padding expanded the dimensions of the box).

So I'm guessing to make this work, I have to apply a boxmodel hack of some sort so that I actually tell standards compliant browsers to start out with 190x190 for "A" (which then expands to 200x200 with the padding), but 200x200 for "A" when in quirks mode. Does this sound right?

It also sounds like vragabond's original mention of not being able to use percentage dimensions for "A" is on target.. if "A" were to say be 100% x 100% of some other parent container of it, then this would not work in any standards compliant browser because the padding would be added on top of the 100% for each dimension, right?

I'm sorry, but I have to admit I think that IE quirks mode interpretation of boxmodel makes more sense compared to the "standards mode" -- that padding and border should be subtracted from the dimensions of the outer box, not added to it. Essentially, it sounds like in standards mode, there's no way to achieve what I'm wanting to do with percentage dimensions on "A".

 

[shadedecho]

The really unfortunate (and taunting) part is that the width can work fine with position:relative and width:auto (as you can see the example link changed to). The "A" box properly stretches to the full width of the container (in this case, the viewport), and the padding is "subtracted" in that the inner "b" box is properly inset as desired.

But there doesn't seem to be any way to get height:auto to work the same way (that is to auto-fill the height of the container, in this case the viewport, without using 100%, which breaks with padding/border involved).

If someone could figure that out, it'd be a great success!

 

[Vragabond]

You could opt to go with the percentage all the way. The problem with your solution is that you can be sure that 100% and 5px padding will be more than 100% but you're unsure if 99% and 5px will be more or less than 100%. However, you can still make the width and height 98% and padding 1%. Or something similar. That would work.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[shadedecho]

vragabond-
it's an interesting concept. I hadn't even considered padding being percentage as well, and them adding up to 100% and that should work, in theory.

unfortunately, theory is not practice. I've updated the link once again, and you can see (IE7 standards mode) the width works great but the height goes beyond 100% of the viewport (despite the math of the percentages adding up to 100%).

Same with FF, et al.

 

[Vragabond]

What is your obsession with absolute positioning? Chris told you it won't work with absolute positioning, yet you still push it. And there's nothing that necessitates absolute position in your scenario.

If you remove the positioning and define what 98% is by adding height: 100% to your body and html tags, this will work as desired.



___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[shadedecho]

vragabond-
I've appreciated your (and others') help thus far, and I have no "obsession with absolute positioning". Those occurences of "absolute" were merely artifacts of various testing attempts on my part.

I've removed from my example page any notion of positioning, absolute or otherwise.

I think you can see from looking at it again that it still with the corrections you mention, it still fails to meet my goal. It fails to display correctly on both width and height dimensions.

The width works great, but the height doesn't.

I appreciate your help, but I also would appreciate you not assuming some "obsession" on my part that is clearly not there. I think I've made it clear in this thread that I'm trying my best at this, and willing to accept any help provided here without badgering.