[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