Tiling the page with CSS

Question

I want to tile my page horitontally and vertically, recursively too. E.g. that the page is split into three columns, whereby the third column is split into two rows.

<div id="left/>
<div id="right">
    <div id="top">...</div>
    <div id="bottom">...</div>
</div>

This fiddle explains what I am talking about: https://jsfiddle.net/zuyu1ed7/

This design works, until you start adding content. Giving one of these containers a border, a margin or a padding results in chaos. The whole layout seems to be very sensible.

Also, trying to add an <div style="width:100%; padding: 10px;"/> inside these containers has the same layout-destructing effects. This situation trandcends my knowledge about css.

At first I thought of using tables, your best friend if css keeps mocking you. But then I saw that html5 does not longer support most colgroup-attributes. So that idea was an dead end.

My question is: How do I split div's horizontally and vertically as shown in the fiddle and be able to add content to the containers?
I am thankful for any solution, but of course I would prefer a solution that works in all browsers.

I dont see the dividers change when I place content in the div? Just adds text? — Max, Nov 21 '16 at 15:46
http://stackoverflow.com/questions/20377482/html-css-box-with-padding-and-margin-and-100-width — DaniP, Nov 21 '16 at 15:50
@Arendax Simple Text works fine, but try adding the padded div I showed into one of the containers. This destroys the whole layout. — Sirac, Nov 21 '16 at 15:56

score 2 · Accepted Answer · edited Nov 21 '16 at 18:16

Have you considered flexbox? It is basically supported by all modern browsers.

Fiddle

html, body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
}

#left {
  height: 100%;
  width: 20%;
  background-color: Blue;
}

#right {
  height: 100%;
  width: 80%;
  background-color: Green;
  display: flex;
  flex-direction: column;
}

#top {
  width: 100%;
  height: 33.33%;
  background-color: lightblue;
}

#center {
  width: 100%;
  height: 33.33%;
  background-color: lightgreen;
}

#bottom {
  width: 100%;
  height: 33.34%;
  background-color: black;
  display: flex;
}

#bottom-left {
  height: 100%;
  width: 35%;
  background-color: Yellow;
}

#bottom-right {
  height: 100%;
  width: 65%;
  background-color: orange;
}

<div id="left">
  </div>
  <div id="right">
      <div id="top"></div>
      <div id="center"></div>
      <div id="bottom">
          <div id="bottom-left"></div>
          <div id="bottom-right"></div>
      </div>
  </div>

Thank you for your answer. I think flexbox might be the best way to achieve what I want. — Sirac, Nov 21 '16 at 17:47
PS: the fiddle-link did not match the code in your answer, I created an edit. — Sirac, Nov 21 '16 at 17:49
You're welcome :) That's strange about the code though, I copied it right from fiddle. meh. — Double M, Nov 22 '16 at 08:28

Tiling the page with CSS

1 Answers1