How to make div inside another divs on left, right, top and bottom

Question

I have divs called bottom, left, right and top. I want to put inside them a div called "center". I want to make it look like this:

======top======
| left-  center  -right |
------bottom-----------

Sound simple, but when I try to do this i have problems with my divs escaping from specified position.

body {
  !important margin: 0 auto;
}

#container {
  margin: 0 auto;
  width: 50%;
}

#headertop {
  background-color: #0000CD;
  margin-top: 50px;
  padding-bottom: 80px;
}

#left {
  background-color: #6495ED;
  padding-bottom: 400px;
  width: 10%;
  float: left;
}

#right {
  background-color: #0000CD;
  padding-bottom: 400px;
  margin-left: 600px;
  width: 10%;
  float: right;
}

#bottom {
  clear: both;
  background-color: #6495ED;
  padding-bottom: 80px;
}

<div id="container">
  <header>
    <div id="headertop">
    </div>
  </header>
  <main>
    <div id="center">
    </div>
  </main>
  <aside>
    <div id="left">
    </div>
    <div id="right">
    </div>
  </aside>
  <footer>
    <div id="bottom">
    </div>
  </footer>
</div>

Use bootstrap and you can divide it in 3 rows. 1 for top, 1 for bottom and the middle one can have 3 columns left, right and center — FortyTwo, Mar 04 '19 at 17:00
Classic three column layout? Try [this](https://stackoverflow.com/questions/20566660/3-column-layout-html-css) or [this](https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/) or [this](https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01) — Khauri, Mar 04 '19 at 17:10

Adrien Rosi · Accepted Answer · 2019-03-04T17:41:22.303

2

Possible answer using flexbox :

div {
  height: 20px;
}

#top {
  background-color: pink;
}

#left {
  background-color: #0000ff;
}

#center {
  background-color: #6666ff;
}

#right {
  background-color: #9999ff;
}

#bottom {
  background-color: pink;
}

.flexbox {
  display: flex;
}

.item--flex-1 {
  flex: 1;
}

<div id="top"></div>
<div class="flexbox">
    <div id="left" class="item--flex-1"></div>
    <div id="center" class="item--flex-1"></div>
    <div id="right" class="item--flex-1"></div>
</div>
<div id="bottom"></div>

edited Mar 04 '19 at 17:41

answered Mar 04 '19 at 17:07

Adrien Rosi

132
5

1

While it works, I don't believe CSS identifies with a double hyphen (`--`) are technically valid. – hungerstar Mar 04 '19 at 17:09
@hungerstar they are valid, they are even recommended as the default way to declare modifiers in [Block Element Modifier (BEM) classes](http://getbem.com/naming/). – CPHPython Mar 04 '19 at 17:17
1

@CPHPython there's a dot in front of the double hyphen, `.--flex-1`. Not a double hyphen being appended to an Block or Element selector, `.item--flex-1`. `.item.--flex-1` is not BEM, but `.item--flex-1` would be. – hungerstar Mar 04 '19 at 17:37
2

It is fixed. Thanks. – Adrien Rosi Mar 04 '19 at 17:43

score 2 · Answer 2 · answered Mar 04 '19 at 17:08

Simplify, simplify, simplify. Also, try to not use floats these days for layout unless you need to and you understand what happens to an element when you do.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* For flex-grow for .content to stretch page height. */
  margin: 0;
}

.content {
  display: flex;
  flex-grow: 1;
}

main {
  flex-grow: 1;
}

/* Demo styles */
header,
footer {
  background-color: whitesmoke;
}

aside {
  background-color: cornsilk;
}

main {
  background-color: aliceblue;
}

<header>Header</header>
<div class="content">
  <aside class="left-sidebar">
    Left Aside
  </aside>
  <main>
    Main
  </main>
  <aside class="right-sidebar">
    Right Aside
  </aside>
</div>
<footer>Footer</footer>

score 0 · Answer 3 · answered Mar 04 '19 at 17:41

Grid would be a nice way to do this too because it allows all elements to be siblings inside of the same parent.

body {
  display: grid;
  grid-template-areas: 'header header header'
                       'left   main   right'
                       'footer footer footer';
  grid-template-rows: max-content 1fr max-content; /* Change this to set the column widths */
  grid-template-columns: max-content 1fr max-content;
  min-height: 100vh; /* To stretch page height */
  margin: 0;
}

body > * {
  padding: 1em;
  outline: 1px solid red;
}

header {
  grid-area: header;
}

.left-sidebar {
  grid-area: left;
}

.right-sidebar {
  grid-area: right;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

<header>Header</header>
<aside class="left-sidebar">
  Left Aside
</aside>
<main>
  Main
</main>
<aside class="right-sidebar">
  Right Aside
</aside>
<footer>Footer</footer>

How to make div inside another divs on left, right, top and bottom

3 Answers3