[manuleka]

ok i've got a block of div which contains another div within!
its floated to the right of my webpage.... here's the codes

style:

div.recent_proj{
    background-color:#b0b0b0;
    width:150px;
    position:relative;
    float:right;
    margin-right:10px;
    margin-left:10px;
    border:1px dashed #606060;
    text-align:center;
    color:#000000;
    font-family:tahoma,verdana,arial;
    font-size:11px;
    font-weight:bold;
    }
 
div.recent_proj div{
    position:relative;
    width:100%;
    margin:auto;
    padding:5px;
    background-color:#e0e0e0;
    }
div.recent_proj div a:link, a:visited{
    color:blue;
    font-weight:normal;
    text-decoration:none;
    }
div.recent_proj div a:hover{
    color:red;
    } 

html:

HTML Code:

<div id="r_proj" class="recent_proj">
	<br />Recent Projects<br /><br />
		<div>
			<a href="">Site Number 1:<br />
			Fill this space up with
			your site by clicking here!</a><br /><br />
			<a href="">Site Number 2:<br />
			Fill this space up with
			your site by clicking here!</a><br /><br />
			<a href="">Site Number 3:<br />
			Fill this space up with
			your site by clicking here!</a><br /><br />
			<a href="">Site Number 4:<br />
			Fill this space up with
			your site by clicking here!</a><br /><br />
		</div>
</div>

now what i get is that the inner div overlaps the outer/parent div when i add in the padding:5px on the div.recent_proj div

why is this happening? i was expecting the child div to only go as far as the 150px width of the parent div unless i insert picture or something wider than 150px!

can anyone enlighten me please

[jfulton]

This is how the box model works. Margins, borders, padding, etc. are added to any explicit with, they are not included in the width (unless you are in IE6, which has a broken box model.)

http://www.w3.org/TR/REC-CSS2/box.html
http://en.wikipedia.org/wiki/Interne..._box_model_bug
http://www.w3.org/TR/REC-CSS1-961217#formatting-model

[TwoD]

Umm, as long as you use a doctype to force IE6 into standard-compliance mode, the "correct" box model is used. In quirks-mode, it falls back to the "buggy" (but more logical) box model found in all previous versions of IE with CSS support.

Or atleast that's what I've experienced, and what the wikipedia article says.

[job0107]

This problem seems to appear in Firefox but not IE6.

[jfulton]

Originally Posted by job0107

This problem seems to appear in Firefox but not IE6.

It's not a problem - it's the expected behavior. Firefox is doing things correctly - IE6 is the one which is wrong. If you define something as 100% width and 10px of padding all around, then the total outer width of the container is 10px (left side) + N + 10px (right side) where N is the width of the parent container.

[job0107]

Remove the width:100%; and everything will work as expected.

div.recent_proj div{
    position:relative;
    margin:auto;
    padding:5px;
    background-color:#e0e0e0;
    } 

If you do not specify a width for a <div> it will automatically span the width of it's container.


Now try padding:15px; and see what happens.