Arranging And Positioning Two Divs Below Each Other In CSS

I'm new to CSS, so this question might be dead simple. I am laying out a website and am stuck with positioning. On the site, I have a middle section in which there is a header with

Solution 1:

If you have something like

<header>header</header>
<main>main content</main>

Use this css:

header, main
{
    display: block; /* because <main/> is very new */
    padding: 20px;
    background: #eeeeee;
}

header
{
    background: blue;
}

That's all, because block elements go below each other per default.

http://jsfiddle.net/86wX4/

Solution 2:

Is there any reason that your #header is absolutely positioned? Remove that style and I think you'll find the <div>s will stack how you're expecting.

Giving the <div> an absolute positioning takes it out the flow of the page, so elements that are still in the flow, 'don't think' it's there, hence, they don't stack on top of each other.

Say this is your markup:

<div id="header">Header</div>
<div id="content">Content</div>

If you are going to absolutely position these elements you'll want to arrange them using left, top, right and/or bottom styles. I.E:

#header{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 50px;
}
#content{
    position:absolute;
    width:100%;
    top:50px; //Because the header is 50px high
}

BUT

Positioning all of these relatively (or leaving them at the default, static) would stack them how you want them anyway - and they would even stretch the width of the page for you.

Hope this helps.

Solution 3:

is there any reason to use your header div with absolute position? you can use relative position for both div's to arrange below each other.