top-margin on div affecting containg div

Forum Moderators: not2easy

Message Too Old, No Replies

top-margin on div affecting containg div

kumarsena

6:05 pm on Apr 28, 2010 (gmt 0)

Hey,

I have the following html 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>
<link href="style2.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>


<div id="top">

<div id="submenu">

</div>

</div>


</body>
</html>

and the following css:

#top{
background:#555;
height:144px;
}



#submenu {

height: 38px;
width:278px;
background: #ccddff;
margin-top:50px;

}

thats all there is in the html and css files, as i removed everything else for debugging.

the problem is that the margin-top applied to the submenu is being applied to the contanier div (#top).

I have tried everything and as you can see taken the code down to a bare minimum but still not able to sort it out. Would greatly appreciate any clues to solving this...

kumarsena

8:57 am on Apr 29, 2010 (gmt 0)

combined the HTML and the CSS in one file:

<!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> 

<style type="text/css">
#top{background:#555; height:144px;} 
#submenu {height: 38px; width:278px; background: #ccddff; margin-top:50px;} 
</style>

</head> 

<body>
 
<div id="top"> 

<div id="submenu"> 
</div> 

</div> 


</body> 
</html>

hbmehta

1:18 pm on Apr 29, 2010 (gmt 0)

I don't know what you are trying to achieve but if you want to show submenu div on top of the top div than you have to use z-index and positioning.

Try this.

<html>

<head>

<style type="text/css">
#top{background-color:#555555; width:100%; height:144px;}
#submenu {height: 38px; width:278px; background-color: #ccddff; margin-top:50px; position:absolute; z-index:2}
</style>

</head>

<body>

<div id="top">

<div id="submenu">
</div>

</div>

</body>
</html>

kumarsena

1:04 pm on May 2, 2010 (gmt 0)

Thanks for the tip. Didn't think of the z-index. I actually solved it by adding a padding to #top.

my attempt here is to align #submenu with the background image for its container #top.

what i do not understand is why the margin to #submenu is apparently applied to the #top div. im sure im overlooknig something here, but not sure what.. :(

it's solved now, but kinda annoying not knowing why it didnt work out the initial way.

again. thanks for the z-index tip. i should really use that more often.

kumarsena

1:05 pm on May 2, 2010 (gmt 0)

[double post]