<html>
<head>
<style type="text/css">
h1{
background-color: red;
margin-top : 10px;
}
div{
background-color:black;
height : 100px;
}
</style>
</head>
<body>
<div>
<h1>Hello World!</h1>
</div>
</body>
This is not my wanted result, i want the h1(Helloworld) to marign with the div, not the body
This is my wanted result: http://img176.imageshack.us/img176/7378/aaawj.png
I have found that if you set a padding on the container element you can avoid the problem you're experiencing. This should do it.
h1{
background-color: red;
}
div{
background-color:black;
height : 100px;
padding-top : 100px;
}
Jessegavin's way works just fine. Another approach might be to position the h1 element (I'm not a big fan of that, but if you want alternatives, hey…)
For example, in your html, this works:
div {background-color:black; height: 100px}
h1 {position: absolute; top: 20px; background-color: red}
To get the full width on the element, as in your graphic, you probably need to apply the width attribute to the header too.