Confusion over Broken Box Model

I been reading about Broken Box Model but i have confusion which i think is best answered by SP folks, so here it is.
1.Does by default, the css elements like padding, margin,content, or any block level elements have a value? i think yes because if you put a div inside body, by default, it will have some margin, so we do

body{margin:0 auto;}

to make it sit at top of on the page. am i right or wrong?
2. like i have a element named box and its width is 1040px and it has a border of 12px. how does this add up while counting my inner body? 1040+12+12 or 1040-12px-12px? how will i calculate the inner space left which has not as of yet. will it the subtracted amount.?
3. if IE 6 i see broken box model because things are over lapping each other. i bet they must be having some default values of the element. how do i fix them? like here is a example. in IE7,8 its fine but in IE 6, its broken

the problem is TABLES. Tables seem to act like IEquirks.
quirte simply IF you are using a table , it’s OUTER WIDTH is equal to whatever you set your css width to; this is in contradiction to how other elements would behave. try this css:

.wrapper{border:12px solid #fcf;  width:1040px;overflow: auto}
table.content{width:520px; border:1px solid red;  background:silver; float: left; }
table.content + table.content {border-left:none; }

the first .conmtent will have an INNER WIDTH of 518px, each content after that will have an inner width of 519;

so :
INNER width of “WRAPER” is 1040 ( = to “width:” in your CSS)
table.content OUTER width is ( = to “width:” in your CSS)
table.content INNER width is ( = to “width:” in your CSS -(border left + border right + padding left + padding right)

well i don’t have real code but i will make a small example


<html>
	<head>
		<title>A Example</title>
	<style type="text/css">
	.wrapper{border:12px solid fcf; height:500px; width:1040px;}
	.content{width:1021px; border:1px solid red; margin:5px;)
	</style>
	
	</head>
	<body>
		<div class="wrapper">
			<table class="content">
				<tr>
					<td>Some Text</td>
					<td>More Text</td>
					<td>Even More Text!</td>
				</tr>
			</table>
		</div>
	</body>
</html>

that is roughly a outline of what my web app has.

Stomme poes. so the bottom line is. inner width would be 1016 given that outer box i 1040+12 px border of each side

It DEPENDS. Did you set the width first?? (Or, you could post some code because I don’t know the boxes you’re using)

BOX MODEL , simplified:

In STRICT MODE, whenever you set a WIDTH property for an element , that will be INSIDE ( or content) width. in other words. Any padding, margin, or border dimensions will be added to the set witdh of the element . The exception to this being older versions of IE in quirks mode. ONLY IN IE quirks… whatever you set the dimensions will whatever be the sum total of the border , padding and inner space.

Mathematically speaking:
InWidthIEq= (width=OuterWidthIEq) - (padding+border)=
and
OuterWidthS=(InWidthS=width)+(padding+border)

where :
InWidthIEq=Inner width, or the space available for content, in IE quirks ;
OuterWidthIEq=outer width, in IE quirks ;
width= what you set in your width property in your CSS;
padding= padding (sum of padding left + padding right)
border=border width ( sum of border-left-width and border-right-width)
InWidthS=Inner width, or the space available for content, in Standards compliant browsers, or IE in strict mode)
OuterWidthS=Outer width, or the space available for content, in Standards compliant browsers, or IE in strict mode)

LOVE THE MATH!!!..LOOOOOOOOOVE IT!!!

anyway in ALL CASES
when you DONT SET A WIDTH OuterWidthS or OuterWidthIEq is equal 100% of ithe width of it’s parent.

so the FORMULA for when WIDTH IS NOT SET would be :
ParentW=OuterWidthS = OuterWidthIEq=InWidth+(padding + border)

if we wanted to know how much area we have for content (InWidthS) when no explicit width is set, we can apply a little algebra:

InWidth=ParentW-(padding + border);
if the padding and border are both 0px then
InWidth=ParentW -(0+0)
which is to say InWidth=ParentW
which is to say 100% of its parent width

Stomme poes. so the bottom line is. inner width would be 1016 given that outer box i 1040+12 px border of each side
phonix… i didn’t got any thing of your maths calculation :stuck_out_tongue: though i hate maths gotta agree with stomme

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! : )

stomme thanks for the detailed answer with example. thought i am confused. if i have a 1040px width box and it has 12px border. which make as a total of 1064px. buw how do calculate how much inside space in left in px? because the way i know it back in table days if a table is of 800px width and if one one td is 300px width and the other two column should be of equal size than it would be 800-300(column1) = 500, 500/2 = 250 each. 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?

Having said that as u noticed my wrapper is 1040. with 12px border. now if we do maths and 1040-12-12 = 1016 (inner space left) but i have a table with width of 1021. moreoever lets make it more realistic so u understand my problem. i break down the table into two and make each 510px width. and make them float to left. (making them float next to eachother),there is my point. on inner space. how we calculate the inner space,

The other option you have as a user is to change the browser defaults and then and of the defaults that are the same across all browsers where the page owner didn’t set their own value will be different from what everyone else sees.

For example I have updated the browser defaults in my browser to place a dashed outline around all the tables in web pages so that all tables are visible whether the web page owner intended for them to be or not. I also have the body margins set to zero to ensure that there is no wasted space around the edges.

The point I was trying to make is that you can’t rely on browser defaults when setting up the CSS. Not all browsers use the same browser defaults and so defining your own defaults for everything important is the only way to make sure it is going to work across all browsers. I have deliberately changed that default in one browser so that when I test across several different browsers it shows up if I forgot to set a default for that value (since all the browsers I use have the same default for that value but other browsers may not).

That code is to centre the content horizontally. It already sits at or near the top of the page. The same effect can be achieved by just setting the left and right margins but that results in longer code.

For example I have updated the browser defaults in my browser to place a dashed outline around all the tables in web pages so that all tables are visible whether the web page owner intended for them to be or not. I also have the body margins set to zero to ensure that there is no wasted space around the edges.

But, isn’t the point to see how your visitors view the page? (If default body space is annoying for you when you surf, then yeah, changing browser settings makes sense)

That’s actually why I didn’t turn off Mozilla’s colour “correction” and try as much as possible to leave defaults on. I need to see what others see so I can adjust my code accordingly.

Though I could be wrong about Emar’s situation, but because he’s a web dev I did assume he meant how to deal with defaults for other viewers.

1.Does by default, the css elements like padding, margin,content, or any block level elements have a value?

Yes, however these are browser defaults. The reason we tend to remove them is because browsers don’t use the same values between each other: one browser may add padding to the body while another doesn’t.
Remember the “auto” in your example is meant to calculate an equal amount of sidemargin. I would just do “0” instead.

  1. like i have a element named box and its width is 1040px and it has a border of 12px. how does this add up while counting my inner body? 1040+12+12 or 1040-12px-12px?

The first one calculates outer dimension: 1040 (the element width) +12 +12= total outer width of 1064. Border and padding are like adding fat under the skin or adding clothing: they increase the total amount of space the box takes up. Imagine a person sitting in a chair with arm rests. If you add fat to under their skin, their outside-dimensions will grow until the edges of their body touch the arm rests. The amount of room inside them for bodily organs, though, remains the same (ok not totally medically accurate but it’s true for CSS boxes : )

how will i calculate the inner space left which has not as of yet. will it the subtracted amount.?

If you set a width on a box, you don’t have to calculate inner space. Your inner space will be the width you set. The outer space will be larger if you added padding or borders. Same goes for height (not that you should be setting heights most of the time).

It gets interesting when you DON’T have a set width. If your box is a block element, position: static (the default), then its outer width is (by default) 100% of its container.
If you add padding or border to a box like that, THEN you are reducing the inner content space. Same goes for height.

If you state width: 100%, then you have set a width. If you then add side padding, margin or border, you’ll get something bigger than 100% which is physically not possible, so how browsers deal with that is apparently up to the vendor.

  1. if IE 6 i see broken box model because things are over lapping each other. i bet they must be having some default values of the element. how do i fix them? like here is a example. in IE7,8 its fine but in IE 6, its broken

IE6 only does a “broken” box model if you have it in Quirks Mode. If you have a correct doctype starting at char 1, line 1 of your HTML document, with a full DTD and all that, and no BOM or comments or anything else before the doctype (why I say, always start at char 1 line 1), it will do the box model correctly. Being IE6, it will also still have the usual IE6 bugs.

Your page has a full, complete doctype. IE6 should not be in Quirks Mode. That means your problems are due possibly to IE6 bugs (such as expanding-box bug, double-margin float bug, px jog bug, collapsing height bug…).

For general interest, IE6 in Quirks Mode and all versions of IE5 and below implement the broken box model. In that, padding and border always take up the inner space, so the outer dimensions of the box remain the same, but you have less room inside for stuff.

Awesome [COLOR=#FF6600][B]Stomme poes[COLOR=Black]![/COLOR][/B][/COLOR]
Steve