Splitting the HTML Page Using Div

Splitting the HTML page using div

You can divide your 4 quadrants into 2 rows.

And give each row 100% width

and each quadrant a width of 50%

also,
make quadrants float left.

.row {    width: 100%;    padding: 0;    margin: 0;}
.quad {    border: 1px solid black;    border-radius: 8px;    width: 49%;    padding: 0;    margin: 0;    height: 200px;    float: left;}

<div>    <select><option>A</option></select>    <input type="button" value="Filter" /></div><div class="row">    <div class="quad">  1 of 4    </div>    <div class="quad">  2 of 4    </div></div><div class="row">    <div class="quad">  3 of 4    </div>    <div class="quad">  4 of 4    </div></div>

divide the page in three parts using div tag

Here is exact JSFiddle or JSBin

Make CSS as

#upleft { 
   width:100px; 
   height: 300px; 
   background:red; float:left; 
}

#upright { 
   width:300px; 
   height:200px; 
   background:blue; 
   float:left
}
#below { 
   height:300px; 
   width:400px; 
   background:green 
}

And in HTML

<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>

Is there a way to split only some div tags into two columns?

Why don't you use flex?

.views-form {  display: flex;  flex-wrap: wrap;}.views-form > div {  flex-basis: calc(100% - 20px);  box-sizing: border-box;  background-color: silver;  margin: 10px;}
.views-form > .item-list {  flex-basis: caLc(50% - 20px);  box-sizing: border-box;  background-color: gold;}

<form class="views-form">   <div>...</div>   <div class="item-list">a</div>   <div class="item-list">b</div>   <div class="item-list">c</div>   <div class="item-list">d</div>   <div class="item-list">e</div>   <div>...</div></form>

Use div tag to divide to 4 area in a page

Use <div style="width: 50%; height: 50%"> for inner divs.

There are no other improvements i can suggest you about styles.

In the other hand, if you want to see divs while designing, i can suggest you to assign them temporary background colors like:

<div style="width: 689px; margin-left: 215px; margin-top: 0px; float: none; height: 502px;background-color:gray">              <div style="width: 50%; height: 50%; display: inline-block; float: left;background-color:yellow">             </div>             <div style="width: 50%; height: 50%;background-color:red;float: left">             </div>             <div style="width: 50%; height: 50%; display: inline-block; float: left;background-color:green">             </div>             <div style="width: 50%; height: 50%;background-color:blue;float:left">             </div>         </div>

Want to split one full page to four div with same size using Bootstrap

.container-fluid {   height: 100vh;}
.row .col-xs-4.col-md-4 {  height: 100%;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><div class="container-fluid">  <div class="row" style="height:25vh;">    <div class="col-xs-4 col-md-4" style="background-color:red;">      .col-xs-9 .col-md-7    </div>    <div class="col-xs-4 col-md-4" style="background-color:yellow;">      .col-xs-3 .col-md-5    </div>    <div class="col-xs-4 col-md-4" style="background-color:lavender;">      .col-xs-3 .col-md-5    </div>  </div>
  <div class="row" style="height:25vh;">    <div class="col-xs-4 col-md-4" style="background-color:red;">      .col-xs-9 .col-md-7    </div>    <div class="col-xs-4 col-md-4" style="background-color:yellow;">      .col-xs-3 .col-md-5    </div>    <div class="col-xs-4 col-md-4" style="background-color:lavender;">      .col-xs-3 .col-md-5    </div>  </div>
  <div class="row" style="height:25vh;">    <div class="col-xs-4 col-md-4" style="background-color:red;">      .col-xs-9 .col-md-7    </div>    <div class="col-xs-4 col-md-4" style="background-color:yellow;">      <h1 class="h1Title">Azkaban</h1>    </div>    <div class="col-xs-4 col-md-4" style="background-color:lavender;">      .col-xs-3 .col-md-5    </div>  </div>
  <div class="row" style="height:25vh;">    <div class="col-xs-4 col-md-4" style="background-color:red;">      .col-xs-9 .col-md-7    </div>    <div class="col-xs-4 col-md-4" style="background-color:yellow;">      .col-xs-3 .col-md-5    </div>    <div class="col-xs-4 col-md-4" style="background-color:lavender;">      .col-xs-3 .col-md-5    </div>  </div></div>