Making a 2x2 grid with divs fullscreen in html

Question

I try to make a grid of 4 divs formed in a 2x2 position. Between those divs I want a border with a width of 1 pixel, basicly looking like this:

1|2
-+-
3|4

The divs need to be equal in their sizes and in total they need to be in full screen with any resolution. My first idea is to make 2 divs for the rows, and in each div 2 divs for the columns, floating left. So far I have the rows working perfectly but as soon as I add the border between the divs a scroll bar shows up. Clearly the border isn't included in the width: 50%. How can I manage to get this?

This is my code so far.

CSS

 html, body 
            {
                margin: 0;
                padding: 0;
                width: 100%;
                min-height: 100%;
            }

            .row
            {
                Width: 100%;
                Height: 50%;
             }

            .border
            {
                border-bottom: 1px solid black;
            }

HTML

<div class="row border" style="background-color: red;">

    </div>
    <div class="row" style="background-color: blue">

    </div>

I also tried to make the code work in a fiddle demo: DEMO but for some reason the height: 100% on body and/or html won't work.

Answer 1

Do you need something like this? I've made it from complete scratch...

Demo

What am doing here is having 4 div elements floated to the left, each 50% wide and have used box-sizing property so that the borders don't interrupt the div alignment. These div elements are 50% in width and are 50% in height

<div></div>
<div></div>
<div></div>
<div></div>

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
}

div {
    width: 50%;
    height: 50%;
    float: left;
}

div:nth-of-type(1) {
    background: #ccc;
}

div:nth-of-type(2) {
    background: #bbb;
    border-left: 1px solid #f00;
}

div:nth-of-type(3) {
    background: #aaa;
    border-top: 1px solid #f00;
}

div:nth-of-type(4) {
    background: #ddd;
    border-top: 1px solid #f00;
    border-left: 1px solid #f00;
}

Answer 2

There is a nice css property box-sizing that you can set to border-box so that the widths of borders and padding are included in the width of an element. This way you can also add as much padding as you need to your divs without worrying that they become too wide.

You also don't actually need to wrap your two rows inside separate divs -- if you specify that a div should be 50% wide, exactly two will fit in a row if you float them left.

HTML

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>

CSS

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
}

.box {
    box-sizing: border-box;
    float: left;
    width: 50%;
    height: 50%;
}

/* This is one way of adding borders, 
   if you *always* know that you have exactly 4 cells 
   aligned like this */
.box:first-child {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
.box:nth-child(2) {
    border-bottom: 1px solid black;
}
.box:nth-child(3) {
    border-right: 1px solid black;
}

See http://jsfiddle.net/RBWXe/

The borders are a bit tricky, because as I understand, you want them in between your boxes, and not touching the edges of the screen. This requires you to specify exactly which sides of each box should have a border.

A fancier way of doing this, which would also allow you to change the number of boxes in your grid later, is to use a background-color for the body element which is your border colour, and have the boxes just half a pixel narrower than 50% (using the calc function), to accommodate the 1px space in between them. See http://jsfiddle.net/yhRBy/2/