Centered 2 column layout with specific filling background colors

Question

I'm trying to create the following layout but I cant figure it out.

Div A has a 66% width and fills the remaining space on the left
Div B and C have 33% width and fill the remaning space on the right
All divs are inside a 100% centered container

The import thing is that I want div B and C to have their own background colors. Div A will just use the body's background color.

Hi Joost Can u please give your code? – Sep 12 '15 at 11:09 — , Sep 12 '15 at 11:09
Add what you have tried. – Shrinivas Pai Sep 12 '15 at 11:09 — Shrinivas Pai, Sep 12 '15 at 11:09
I'll give an example later, something came up. – Joost Sep 12 '15 at 11:27 — Joost, Sep 12 '15 at 11:27

score 0 · Accepted Answer · edited May 23 '17 at 12:22

As I said in this answer

The most obvious solution is just to close the container...have your full width div then open a new container. The title 'container' is just a class...not an absolute requirement that it hold everything all at the same time.

For decoration (background) purposes only,you can use pseudo-elements.

html {
  box-sizing: border-box;
}
*,
::before,
::after {
  box-sizing: inherit;
}
html,
body {
  height: 100%;
}
body {
  overflow: hidden;
}
.container {
  height: 100%;
  width: 50%;
  margin: auto;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  padding-top: 50px;
  /* demo purposes only */
}
.box:after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}
.left {
  width: 66.666%;
  height: 100px;
  float: left;
  position: relative;
}
.right {
  width: 33.333%;
  height: 50px;
  float: right;
  position: relative;
}
.left::before,
.right::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 100vw;
  z-index: -1;
}
.left:before { /* left version if required*/
  background: lightblue;
  right: 0;
}
.one:before {
  background: lightgreen;
  left: 0;
}
.two:before {
  background: pink;
  left: 0;
}

<div class="container">
  <div class="box">
    <div class="left"></div>
    <div class="right one"></div>
    <div class="right two"></div>
  </div>
</div>

Centered 2 column layout with specific filling background colors

1 Answers1