How to create web page using CSS and div to create 4 split screen?
HTML would look like this:
<div class="box">
Area 1
</div>
<div class="box">
Area 2
</div>
<div class="box">
Area 3
</div>
<div class="box">
Area 4
</div>
CSS would look like this:
html, body {
width: 100%;
height: 100%;
}
.box {
float: left;
width: 50%;
height: 50%;
}
Here's a Fiddle to play with: http://jsfiddle.net/UMKWU/
box-sizing: border-box
, so the border becomes part of the width. (-moz-, -webkit- also) and leave width: 50%
fcalderan 2012-04-04 09:37
<div class="one" style="float: left; width: 50%; height: 50%;">
</div>
<div class="two" style="float: left; width: 50%; height: 50%;">
</div>
<div class="three" style="float: left; width: 50%; height: 50%;">
</div>
<div class="four" style="float: left; width: 50%; height: 50%;">
</div>
I'm not allowed to comment on questions, otherwise I would just add a comment on first answer by Jordan. His answer is correct, but when you add border, you need to account for the border width, in that case, just add to your css: border-width:1%;
and change the width:49%;
height: 49%;
.
That should do the trick, here is a link to Fiddle: http://jsfiddle.net/UMKWU/3/
Hi you can do as like this
Css
html, body {
width: 100%;
height: 100%;
}
.box1, .box2, .box3, .box4 {
float: left;
width:49%;
height: 49%;
border-style: solid;
border-width:1%;
}
.box3{
clear:left;
}
HTML
<div class="box1">
Area 1
</div>
<div class="box2">
Area 2
</div>
<div class="box3">
Area 3
</div>
<div class="box4">
Area 4
</div>
Live demo here http://jsfiddle.net/rohitazad/UMKWU/8/