padding problem of div within div

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:

<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

Tansunn

First, you might want to use HTML tags instead of CODE tags around your HTML when posting.

Second, what browser are you using? I only have IE here at work (which is lame) but as far as I can tell, it works like you intend it to. I'll check it on my own system at lunch break, though, where I can check it in other browsers. Could you post a screen shot of what's happening on your system?

RWB

I can't even view the source code even when I change the editor mode, it's just the text showing.

Tansunn

I just hit "quote and reply" and that got all the HTML to show up so I could copy it out into notepad.

[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>
[/html]

One thing I just noticed, the first div tag has its id set to "r_proj" but the stylesheet doesn't have that id defined anywhere. What happens if you remove the id declaration from that div tag? Also, is it configured in your stylesheet and you just forgot to include it in the post?