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:

<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

Could you upload it so we can see what's going on for ourselves?

If you're going to use floats, you must CLEAR those floats.

http://css-discuss.incutio.com/?page=ClearingSpace

I don't see why you don't use an unordered list for your navigation, it would be a better implementation than stacking links inside a div.