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>
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.