Setting Width, what exactly does it set?
Xizor
documentation on w3.org. So here goes:
If I have a box like
#Box {
border: solid black 3px;
width: 100%;
}
Box is inside another element which has been set at width: 700px;
It seems like when the width of Box is set, it takes 100% of what its in (so
700px) and adds to that the border, padding, and margins. So the width ends
up being (1*700) + left/right border + left/right padding + left/right
margin.
This is a real pain in the butt. Cause now I have something larger than the
thing containing it, so it forces the container to expand.
I've looked at the CSS specification at w3.org and I can't find a way to set
the whole thing to a percentage instead of a percentage plus everything
else. I've tried using max-width but it doesn't seem to do anything. Is
max-width not supported in IE? Anyone know how to do this?
Thank you.
David Lovell (MSFT)
dimesinos you have set, not outside.
So if you have two boxes side by side that are 700 width and 300 width
respective, even if you set a 15px padding and 5 px border, the width of the
two boxes together will still be only 1000 px.
--
Thanks,
David W. Lovell
This posting is provided "AS IS" with no warranties, and confers no rights.
If a script was included within this post, use of included
script samples are subject to the terms, specified at
http://www.microsoft.com/info/cpyright.htm"
Please do not send e-mail directly to this alias. This alias is for
newsgroup purposes only.
"Xizor" <no...@nope.com> wrote in message
news:8LwWa.29112$cF.11222@rwcrnsc53...
Pascal Chevrel
> In my experience padding, spacing and borders appear INSIDE the width/height
> dimesinos you have set, not outside.
>
> So if you have two boxes side by side that are 700 width and 300 width
> respective, even if you set a 15px padding and 5 px border, the width of the
> two boxes together will still be only 1000 px.
>
http://www.tantek.com/CSS/Examples/boxmodelhack.html
Pascal
--
FAQ Mozilla/Netscape 7 en français : http://pascal.chevrel.free.fr/
Drag me, drop me, treat me like an object
David Lovell (MSFT)
<html>
<head>
</head>
<body>
<div style="width:1000px;background-color:blue;">1000 pixels wide
exactly</div>
<span style="width:700px;border:#000000 5px solid;background-color:red;">700
pixels wide exactly</span><span style="width:300px;border:#000000 5px
solid;background-color:green;">300 pixels wide exactly</span>
</body>
</html>
Even with 5 pixel borders, the 2 span's of 700 and 300 pixels are still
exactly as wide as the div of 1000px wide directly above it.
The page you linked mentions CSS1, I wonder if this behavior was something
changed in CSS2?
(Note: Make sure there is no space betwwen the </span><span> when recreating
this file)
--
Thanks,
David W. Lovell
This posting is provided "AS IS" with no warranties, and confers no rights.
If a script was included within this post, use of included
script samples are subject to the terms, specified at
http://www.microsoft.com/info/cpyright.htm"
Please do not send e-mail directly to this alias. This alias is for
newsgroup purposes only.
"Pascal Chevrel" <pascal.chev...@free.fr> wrote in message
news:3f2eb6f4$0$26382$626a...@news.free.fr...
John Smith
> In my experience padding, spacing and borders appear INSIDE the width/height
> dimesinos you have set, not outside.
>
> So if you have two boxes side by side that are 700 width and 300 width
> respective, even if you set a 15px padding and 5 px border, the width of the
> two boxes together will still be only 1000 px.
>
added. So a 700px box with a border of 10px and a padding of 10px would
be 740px in width.
The latest patch seems to have fixed that or I got used to a style where
I needn't care.