VisualizeEdits VisualizeEdits - 4 months ago 13
CSS Question

How to float 2 divs at the bottom of a div

I've tried setting up my header (containing 2 divs) with

position: relative;


and both divs inside the header with

position: absolute;
bottom: 0;


But I want the purple
#menu_bar
and blue
#sub_menu_bar
divs to float at the bottom of the red
#header
div.

How can I achieve that?



#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;
}

body {
display: flex;
}

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

#main_container {
background: rgba(0, 0, 0, 0.526);
display: block;
height: 100%;
margin-left: auto;
padding-left: 20px;
padding-right: 20px;
flex: 1;
}

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

#menu_bar {
background: rgba(9, 20, 164, 0.487);
display: block;
height: 35px;
}

#sub_menu_bar {
background: rgba(15, 230, 255, 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;
}

<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>





View on JSFiddle

Answer

Just add another div inside the header and give it a height.

Allows for less CSS, and helps semantically separate whats inside the head. you should also use more semantic html tags such as <header></header> in place of <div id="header"></div>

You don't even need to add a height to the <div id="header_content"> if you want it to be the height of its content.

  #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;
}

body {
    display: flex;
}

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

#main_container {
    background: rgba(0, 0, 0, 0.526);
    display: block;
    height: 100%;
    margin-left: auto;
    padding-left: 20px;
    padding-right: 20px;
    flex: 1;
}

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

#header_content{
    height: 50px;
}

#menu_bar {
    background: rgba(9, 20, 164, 0.487);
    display: block;
    height: 35px;
}

#sub_menu_bar {
    background: rgba(15, 230, 255, 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;
}
<body>
  <div id="menu_container"></div>
  <div id="main_container">
    <div id="header">
      <div id="header_content"></div>
      <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>

Comments