不同高度的网格系统css

Question

I'm new to html&css, I'm trying to set the following grid system: current state

look like this: desired solution

My html code consists of 2 main divs (for each 'row'), each one contains 2 divs (logo + notes, nav + content) I've used display: inline-block in each div, but still can't figure out how to place the blue box directly under the yellow one? I prefer a solution without jquery plugins, the simplest solution there is thanks

Code:

 .header { display: inline-block; width: 100%; } .logo { display: inline-block; width: 30%; height: 100px; background-color: red; } .notes { display: inline-block; width: 69%; height: 50px; background-color: yellow; } .nav { display: inline-block; width: 30%; height: 50px; background-color: green; } .content { display: inline-block; width: 69%; height: 50px; background-color: blue; } 

 <div class="header"> <div class="logo"> Logo </div> <div class="notes"> Notes </div> </div> <div class="main"> <div class="nav"> Nav </div> <div class="content"> Content </div> </div> 

Answer 1

I know this isn't a great way of doing it but this method works. Here are the change, which I have made for you .content :

  top: 50px;
  left: calc(30% + 7px);
  width: calc(69% - 10px);

Here is the final code:

 .header { display: inline-block; width: 100%; } .logo { display: inline-block; width: 30%; height: 100px; background-color: red; } .notes { display: inline-block; width: 69%; height: 50px; background-color: yellow; } .nav { display: inline-block; width: 30%; height: 50px; background-color: green; } .content { display: inline-block; width: calc(69% - 10px); height: 50px; background-color: blue; position: fixed; top: 50px; left: calc(30% + 7px); } 

 <div class="header"> <div class="logo"> Logo </div> <div class="notes"> Notes </div> </div> <div class="main"> <div class="nav"> Nav </div> <div class="content"> Content </div> </div> 

Answer 2

I would re-arrange the markup and make 2 columns.

 .header { display: inline-block; width: 30%; float: left; } .logo { height: 100px; background-color: red; } .notes { height: 50px; background-color: yellow; } .main { margin-left: 30%; } .nav { height: 50px; background-color: green; } .content { height: 50px; background-color: blue; } 

 <div class="header"> <div class="logo"> Logo </div> <div class="nav"> Nav </div> </div> <div class="main"> <div class="notes"> Notes </div> <div class="content"> Content </div> </div>