Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Not Solved Position div inside another div [CSS]
#1
Not Solved
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;
}
My Website: LSGForums
Add me via Skype! LSGForums
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)