padding error, div within div

manuleka · #1 (**permalink**) 14-06-2007, 10:50 AM

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

HappyBeaver · #2 (**permalink**) 27-06-2007, 05:39 PM

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

kwah · #3 (**permalink**) 09-07-2007, 09:57 PM

with the 10px margins, the outer div would be 150px and the inner div would be 130px (plus 10px either side = 150px)
and that is without even considering the 10px left and right margins ..

think of it like this:

Code:

||<<-------------------150px----------------->>||
||                                             ||
|| 10px margin | 120px INNER DIV | 10px margin ||
||                                             ||

does that make sense?

lol there are so many questions that need to be answered so please bear with me :P

- have you considered giving the inner div its own id or class?
- what browser are you using? does this happen on every browser? have you tried different browsers?
- darn ive forgot what else i was supposed to ask :/ sorry

it is a long shot that i thought of before i remembered that padding is an internal border (so affects content inside the internal div), but maybe you could try switching the order in which the width and padding around?
the reasoning behind it is that maybe (and it is a long shot) the width is being calculated from the left -- i mean, the width of the div is calculated, then the extra padding is added onto it ?

Quote:

width:100%;
margin:auto;
padding:5px;