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:

Code:

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:

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

Have you tried editing the offending css in the div to 150px instead of 100%?