Separate div from heading

I want to separate div with id main from header 40px but don't know how. Also want div primary and sidebar to stretch to bottom. I managed that setting min-height: 500px also to primary and sidebar div. Is it good that way?

And last question, why my footer is separated from main div?

 header {
   position: fixed;
   top: 0;
   left: 0;
   height: 200px;
   z-index: 100;
 }

 #wrap {
   margin-top: 200px;
 }

 #main {
   width: 60%;
   min-height: 500px;
   margin: 0 auto;
 }

   #primary {
     box-sizing: border-box;
     width: 80%;
     float: left;
   }

   #sidebar {
     width: 20%;
     box-sizing: border-box;
     width: 80%;
     padding: 20px;
     float: right;
   }

http://jsfiddle.net/T78CC/

Answers


I want to separate div with id main from header 40px but don't know how.

#main {
    padding-top:40px;
}

Also want div primary and sidebar to stretch to bottom. I managed that setting min-height: 500px also to primary and sidebar div. Is it good that way?

It's not a great way since anyone wih a screen over 500px will see it ending there.

And last qustion, why my footer is seperated from main div?

Because the p tag has margins by default which is pushing things


...so this is simple as kthornbloom wrote.

 padding-top:40px;

I also added padding-top before posting a question, but thing that confused me is a green space between heading and contents which is padding itself, so this question was unnecessary, sorry folks and thanks for your help again :)


Need Your Help

Parse NSURL query property

iphone objective-c nsurl

I have a URL like myApp://action/1?parameter=2&secondparameter=3

python how to click this button through selenium

python python-2.7 python-3.x selenium

Is it possible to click this button (Fullscreen)? (its a radio station)