If you did say
#element {
width: 1040px;
border: 12px solid #000;
}
then
1040 + 12 + 12 = 1064px. This is your outer dimension.
buw how do calculate how much inside space in left in px?
If you set the width yourself, you don’t have to. The CSS code above says the box is 1040px wide. You added the borders to the outside so your inner space is still what you said it would be: 1040px.
Go ahead and make a box and give it an ugly background colour, and then add a different-coloured border, and put some text in it that’s enough to go all the way across the box. There are some tools for browsers that can measure pixels. Get one and measure what your boxes’ new dimensions are. I use the ruler that comes with the Web Developer Tool Bar in Firefox, though it’s not as fancy and cool as the micrometer-looking thing Paul O’B has (but that seemed to be a Windows product).
i wanted to know how my width will work coz 1040 is total, when i subtract 12 from both side. it leaves me with 1016px inner space available. am i right?
Yes, if 1040 is set by an outer container.
Remember I said the rules were different if you didn’t set a width?
<div id="container">
<div id="emarsBox">
<p>This content is inside Emar's box.</p>
</div>
</div>
If you have code like this:
#container {
width: 1040px;
}
Children can’t be bigger than the container (generally), so right now, with no CSS on #emarsBox, #emarsBox is a non-positioned, static block, so it’s automagically 100% width of its container. Since it’s parent container is 1040px wide, right now #emarsBox is also 1040px wide.
But now you need a 12px border on #emarsBox.
#emarsBox {
border: 12px solid #000;
}
Because you did not set a width on #emarsBox, and because #emarsBox is constrained by the available space in its container, the borders are now taking up inner space. The total inner width for content inside #emarsBox now is 1040 - 12 - 12 = 1016px, like you calculated.
So you decide to give #emarsBox a width because you want 1040px inner space, not 1016px:
#emarsBox {
[b]width: 1040px;[/b]
border: 12px solid #000;
}
Well, now you have a problem. You’ve set a width, meaning the borders are now supposed to get added onto the outside of #emarsBox. But that means #emarsBox becomes 1040 + 12 + 12 = 1064px, and that can’t work out well at all, because #container is only 1040px wide!
(so if #emarsBox has to be 1040, then you would have to make #container wider).
Browsers have to decide how to deal with something incompatible like that, and felgall can correct me if I’m wrong but I don’t think they all deal with it the same way. Some browsers might let #emarsBox overflow (visibly be bigger than #container). But some might do something else. Since a browser doesn’t know how to stuff a 1064px-wide box inside a 1040px-wide box, there may be rendering errors elsewhere on the page.
If you’re working with tables, the rules might be a bit different, because those aren’t static blocks… they’re special “table” blocks with slightly different rules. I don’t work with tables with widths nearly enough to know what exactly they do in what conditions, but there’s a technical page about it that will probably cure your insomnia : ) That and browsers don’t always follow the specs anyway.
Ok, I thought you meant adjust your own browser default settings in your own browser… so you mean state your own in your code, got it, and agreed.
AAAARG NOOOO HATESES WE HATSES THE MATHS NOOOOOO!!!
We hatses the maths! Hateses them! : )
though i hate maths gotta agree with stomme