Couple of simple DIV layout questions

celebritymusic · April 16th, 2007, 10:43 AM

Hi

1. If you have a DIV within a DIV, and you want the nested one to be 20px smaller (left and right) than the outside DIV, how do you do that? I thought it would be either padding or margin settings, but when I use them, the left setting is fine (20px inside the outside DIV), but the right setting seems to be taken from the right hand side of the screen instead of the outer DIV. Is there a setting for the outer DIV I need to set too?

2. I have two DIVs, and I want them on top of one another as in a content/footer relationship. They are set up basically like <div id="content"></div> <div id="footer"></div>, but the footer always appears within the content, not outside it. How do I rectify this?

Cheers

Shaun

sr71000 · April 17th, 2007, 11:04 AM

Hey. Here's how to center one div inside another! :-D set the widths to whatever you want them, then the inner div set margin-left:auto; margin-right:auto;

Code:

<html>
<head>
</head>
<body>
<div style="width:800px; height:110px; background-color:black;">
<div style="width:760px; height:100px; background-color:green; margin-left:auto; margin-right:auto;">
</div>
</div>
</body>
</html>

sr71000 · April 17th, 2007, 11:05 AM

on the div you want to appear below the content add

Code:

style="clear:both;"