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>
Related Topics
How to Force Div Contents to Stay in One Line With HTML and CSS
Making Div Visible or Invisible Depend on Condition
How to Manually Trigger Click Event in Reactjs
How to Display Dynamic Json Data in HTML Using Angular 6
Navbar Menu Dropdown Not Working (Won't Drop Down When Clicked)
How to Make a Div 100% Height of the Browser Window
Vertical-Align With Bootstrap 3
My Inline-Block Elements Are Not Lining Up Properly
Why Doesn't Percentage Padding/Margin Work on Flex Items in Firefox and Edge
≪Button≫ Vs. ≪Input Type="Button" /≫. Which to Use
How to Set the Default Value For an HTML ≪Select≫ Element
Is It Valid to Replace Http:// With // in a ≪Script Src="Http://..."≫
Why Can't the ≪P≫ Tag Contain a ≪Div≫ Tag Inside It
Angular 5 File Upload: Failed to Set the 'Value' Property on 'Htmlinputelement'
Provide an Image for Whatsapp Link Sharing
How to Remove Blue Highlight on Hover in Select, Option Inputs HTML for Chrome