MyBB Community Forums

I am starting to look into making a responsive theme and learn to keep the code very clean, but I sadly ran into a small problem involving positioning of a div.

I'm not sure how to properly use the position (absolute/fixed/static) inside another <div> tag, so I'm hoping someone could shed some light on this situation.

I'm trying to move the 2 divs (menu_bar)(sub_menu_bar) to the bottom of the header div using the margin-top, but it's adding unnecessary space above the body.

Here's the code to play around with.
JSFiddle: https://jsfiddle.net/bmcado3o/

HTML:

<body>
    <div id="menu_container">
        
    </div>
    <div id="main_container">
	<div id="header">
	    <div id="menu_bar"></div>
	    <div id="sub_menu_bar"></div>
	</div>
	<div id="contents"></div>
	<div id="recent_topics"></div>
	<div id="stats"></div>
    </div>
</body>

CSS:

#html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

#menu_container {
    position: fixed;
    display: block;
    background: rgba(42, 42, 42, 0.496);
    width: 250px;
    height: 100%;
    float: left;
}

#main_container {
    background: rgba(0, 0, 255, 0.526);
    height: 100%;
    margin-left: 250px;
    padding-left: 20px;
    padding-right: 20px;
}

#header {
    background: rgba(255, 0, 0, 0.526);
    height: 120px;
    margin-left: -20px;
    margin-right: -20px;
}

#menu_bar {
    background: rgba(127, 0, 128, 0.487);
    display: block;
    height: 35px;
}

#sub_menu_bar {
    background: rgba(255, 255, 0, 0.539);
    display: block;
    height: 35px;
}

#contents {
    background: pink;
    height: 600px;
    margin-top: 20px;
}

#recent_topics {
    background: green;
    height: 300px;
    margin-top: 20px;
}

#stats {
    background: orange;
    height: 300px;
    margin-top: 20px;
    margin-bottom: 20px;
}

VisualizeEdits