Create 2x2 mesh with fullscreen div in html

Question

I am trying to create a grid of 4 divs formed at 2x2 position. Between these divs, I want a border 1 pixel wide, basically looking like this:

1|2 -+- 3|4 

Divas should be equal in size, and in general they should be in full screen mode with any resolution. My first idea is to make 2 divs for rows, and in each div 2 divs for columns floating to the left. So far I have lines that work fine, but as soon as I add the border between the div, a scrollbar appears. Obviously, the border is not included in the width: 50%. How can i do 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 get the code to work in a demonstration of the script: DEMO , but for some reason, the height: 100% on the body and / or html will not work.

Answer 1

Do you need something like this? I made it out of a complete scratch ...

Demo

What does here, we have 4 div elements that are on the left, each 50% wide and use the box-sizing property so that the borders do not interrupt the alignment of the div . These div elements are 50% in width and 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 box-sizing property that you can set in a border-box so that the width of the width and padding are included in the width of the element. That way, you can also add as many indentation as you need for the div , without worrying about them becoming too wide.

You also do not need to wrap two lines inside a separate div - if you specify that the size of the div should be 50% wide, exactly two will fit into the line 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 complicated because, as I understand it, you want them to be between your drawers and not touch the edges of the screen. This requires that you specify exactly which sides of each window should have a border.

A more convenient way to do this, which will also allow you to change the number of cells in your grid later, is to use background-color for the body element, which is your border color, and have the margins only half pixel narrower than 50% (using the function calc ) to place 1px space between them. See http://jsfiddle.net/yhRBy/2/

Answer 3

Check out this script:

height instead of min-height

http://jsfiddle.net/N6JuV/7/

This 2X2 grid is what you want.

You just need to make sure your widht% and margin% should add 100%. You can even use a decimal value for smaller fields.

Eg. http://jsfiddle.net/N6JuV/8/

Answer 4

Here is my solution

 <div class="d-table"> <div class="d-row"> <div class="d-cell first"></div> <div class="d-cell first"></div> </div> <div class="d-row"> <div class="d-cell first"></div> <div class="d-cell first"></div> </div> </div> 

And CSS

 .d-table{ display:table; table-layout:fixed; height:100%; width:100%; // Assuming you have already set 100% height and width to body and html } .d-row{ display : table-row; } .d-cell{ display : table-cell; } .first{ width : 50%; } .second{ width : 50%; } 

Demo here http://jsbin.com/osutos/1/edit