Power By 专否社区

How to create a web page with 4 rectangurlar splits?

Go To StackoverFlow.com

2

How to create web page using CSS and div to create 4 split screen?

strong text

2012-04-04 03:07
by kinkajou

2

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/

2012-04-04 03:23
by Jordan
when I add border the arrangement is disturbed http://jsfiddle.net/UMKWU/1 - kinkajou 2012-04-04 03:31
Yup, border actually adds to the width. You won't be able to add a border unless you do width of 49% or something - Jordan 2012-04-04 06:50
@kitex use 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

1

<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>
2012-04-04 03:10
by chadpeppers
I need the div to be sized always it doesn't size ? - kinkajou 2012-04-04 03:35

1

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/

2012-04-04 03:54
by Andrei Dvoynos
@Andrie D great it work - kinkajou 2012-04-04 05:13

0

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/

2012-04-04 05:32
by Rohit Azad
Ads