ODD margin setup?

doctrin13th · 11-20-2009, 01:55 AM

i have a DIV section on my page with id="containertop"
i have also a DIV id="containertitle" INSIDE the "containertop" div

the css of the containertop is

Code:

#containertop {
     bgcolor: #CCCCCC;
     margin:0px;
     width:483px;
     height:48px;
}

the css of the containertitle is

Code:

#containertitle {
     margin:20px 0px 0px 20px;
}

what i want is for the containertitle's top and left margin inside the containertop to be 20px and the rest is 0px.

the output of the left margin seems working
but the top margin, which i set for the containertitle applies also to the parent DIV which is the containertop.

so the result is the text inside the containertitle is 20px away from the left edge on the containertop, which is what i want, BUT the containertitle's text is placed on top even if i set the top margin 20px away from the containertop's edge.

my html is

Code:

<div id="containertop">
    <div id="containertitle">
            REAL ESTATE MORTGAGE LOAN
    </div>
</div>

how can i make it so that the text "REAL ESTATE MORTGAGE LOAN" will have it's margin 20px top and left from it's container(containertop)?

Excavator · 11-20-2009, 02:03 AM

Hello doctrin13th,
That is a classic example of uncollapsing margins.

See if the following works for you, I've added some background colors to make it easier to see where the different elements are -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{background:#fc6;}
#containertop {
     background: #CCCCCC; /*no selector bgcolor in CSS*/
     margin: 0px;
     width: 483px;
     height: 48px;
	 overflow: auto;
}
#containertitle {
     margin: 20px 0px 0px 20px;
	 background: #f00;
}
</style>
</head>

<body>
<div id="containertop">
    <div id="containertitle">
            REAL ESTATE MORTGAGE LOAN
    </div>
</div>
</body>
</html>

doctrin13th · 11-23-2009, 01:06 AM

Sir EXCAVATOR thank you! that's what I need to learn. By the way, the html/body margin works on Firefox but it seems not to work on IE