CODEWITHSUNDEEP
htmlcss
VisualizeEdits
VisualizeEdits

Reputation: 27

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

Upvotes: 0

Views: 114

Answers (2)

Asons
Asons

Reputation: 87191

I recommend not using position: absolute, but if needed, do like this.

Here I added position: relative; to #header and gave the #menu_bar's rule this update

left: 0;
width: 100%;
position: absolute;
bottom: 35px;

and #sub_menu_bar rule this

  left: 0;
  width: 100%;
  position: absolute;
  bottom: 0;


#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;
  position: relative;
}

#menu_bar {
    background: rgba(9, 20, 164, 0.487);
    display: block;
    height: 35px;
  left: 0;
  width: 100%;
  position: absolute;
  bottom: 35px;
}

#sub_menu_bar {
    background: rgba(15, 230, 255, 0.539);
    display: block;
    height: 35px;
  left: 0;
  width: 100%;
  position: absolute;
  bottom: 0;
}

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

Upvotes: 0

DirtyRedz
DirtyRedz

Reputation: 566

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>

Upvotes: 1

Related Questions