Full height layout with Header, footer, sidebar and content divided into 4 equal boxes

Issue

I am trying to do the layout that can be seen in the image below:
Wide screen layout

It is full screen, the header and footer have fixed height (60px), the green sidebar is 200px wide; both the sidebar and the section on the right side occupy the entire available space on the y axis.

For wide screens, I want to divide the right side into 4 equal boxes, displayed 2 by 2.

For medium and small screens (< 768px), I want to display the 4 equal boxes 1 by 4, like the image below:

enter image description here

html {
  height: 100%;
}

body {
  height: 100%;
  position: relative;
}

#wrapper {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  padding: 60px 0;
  position: relative;  
}

#header {
  width: 100%;
  height: 60px;
  background: #171717;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height:100%;
  background: gray;
  display: flex;
}

#left {
  background: green;
  width: 200px;
  flex: 0 0 200px;
}

#right {
  background: red;
  width: 100%;
  position: relative;
}

#footer {
  width: 100%;
  height: 60px;
  background: #171717;
  bottom: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">
    <div id="left"></div>
    <div id="right">
        <div class="red_box"></div>
        <div class="red_box"></div>
        <div class="red_box"></div>
        <div class="red_box"></div>
    </div>
  </div>
  <div id="footer">Footer</div>
</div>

How do I style those red boxes to achieve the 2 layouts, if possible, without using display:table and display:table-cell, as this will create problems with positioning items absolutely inside the red boxes on Firefox?

Solution

A found the solution. Here it is:

html {
  height: 100%;
}

body {
  height: 100%;
  position: relative;
  color: white;
  font-family: Arial, sans-serif;
}

body * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#wrapper {
  height: 100%;
  padding: 60px 0;
  position: relative;
}

#header {
  width: 100%;
  height: 60px;
  background: #171717;
  position: absolute;
  top: 0;
  left: 0;
}

#content {
  height: 100%;
  display: flex;
}

#left {
  background: green;
  width: 200px;
  flex: 0 0 200px;
}

#right {
  background: blue;
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.red_box {
  flex: 0 0 50%;
  background: red;
  border: 1px solid #111;
  border-bottom: none;
  text-align: center;
}

#footer {
  width: 100%;
  height: 60px;
  background: #171717;
  bottom: 0;
  left: 0;
}

@media (max-width: 768px) {
  .red_box {
    flex: 0 0 100%;
  }
}
<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">
    <div id="left"></div>
    <div id="right">
      <div class="red_box">1</div>
      <div class="red_box">2</div>
      <div class="red_box">3</div>
      <div class="red_box">4</div>
    </div>
  </div>
  <div id="footer">Footer</div>
</div>

Answered By – Razvan Zamfir

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.