Nested layout inside absolute container

Question

I'm trying to create a layout similar to this:

+-------------------------+ 
|      |        2         |
|      | +----+---------+ |
|      | |    |         | |
|   1  | |  4 |    5    | |
|      | |    |         | |
|      | +--------------+ |
|      | |      6       | |
|      | +--------------+ |
+-------------------------+

1: Menu
2: Container
3: (removed toolbar for simplicity)
4, 5, 6: Nested layout

The html is organized this way

<div class="mainapp">
  <div class="menu">
  </div>
  <div class="container">
    <div class="childlayout">
      <div class="topleft"></div>
      <div class="topright"></div>
      <div class="bottom"></div>
    </div>
  </div>
</div>

So far, my CSS looks like this:

.mainapp {
  position: relative; 
  width: 100%;
  height: 100%;
}

.menu {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
}

.container {
  position: absolute;
  left: 200px;
  top: 0;
  bottom: 0;
  right: 0;      
}

.childlayout {
  // here is the problem
  // this shuld be a 100% width and 100% height
  // RELATIVE to parent
}

.topleft {
   position: absolute;
   left: 0;
   top: 0;
   width: 50%;
   height: 50%;
}

.topright {
   position: absolute;
   left: 50%;
   top: 0;
   right: 0;
   height: 50%;
}

.bottom {
   position: absolute;
   left: 0;
   top: 50%;
   right: 0;
   bottom: 0;
}

As you can see in the CSS, the childlayout class must be position: relative to allow child position: absolute. I need all these divs to be percent based because the "app" can be resized on the fly, and I want everything to adapt to the browser's window size.

Also, I would preffer this to be all CSS without jQuery/JavaScript (of course, if ther's no solution I can use these).

I can accept a solution based on Flex Layout also.

Can someone help me with this?.

make both `.menu` and `.container` `position:relative; float:left` — Nikos M., Aug 12 '15 at 11:39
Keep away from absolutely positioning everything. You will find it difficult to control it. Would advise you to keep it simple at first. Get the hang of it and then add complexity. Here is a very simple example http://jsfiddle.net/abhitalks/dpzzwqeL/ But, understand that this is still not responsive. On very small screens like that of phones, this will be too narrow to use. For such scenarios, use frameworks like bootstrap. — Abhitalks, Aug 12 '15 at 12:48

score 2 · Accepted Answer · edited May 23 '17 at 11:53

2

.mainapp {
  position: relative; 
  width: 100%;
  height: 100%;
}

here height:100% is the problem.

change it to

.mainapp {
      position: relative; 
      width: 100%;
      height: 100vh;
    }

and you will have what you want.

Read THIS answer from Mr. James Donnelly , if you want a better explanation.

edited May 23 '17 at 11:53

Community

1
1

answered Aug 12 '15 at 11:39

Aditya Ponkshe

3,840
4
39
58

Thank you very much. This allowed me to get the desired result without breaking my code. – leonardorame Aug 12 '15 at 14:22

Nested layout inside absolute container

1 Answers1