CSS to fill screen 50% 50% vertically

Question

enter image description here

What's the proper CSS to achieve this for most browsers?

2 Divs - 50% and 50% vertically fill the entire screen.
Each div has 50% and 50% horizontally to fill 1600px width.

<!-- TOP 50% -->
<div class="top">
   <div class="left">img</div>
   <div class="right">txt</div>
</div>

<!-- BOT 50% -->
<div class="bot">
   <div class="left">text</div>
   <div class="right">img</div>
</div>

My answer here is relevant: [Make div 100% height of browser window](http://stackoverflow.com/a/16837667/1317805). — James Donnelly, May 30 '14 at 14:25
Sort of like this? http://www.flynn1179.net/xml (at least for the left/right split) — Flynn1179, May 30 '14 at 14:25
well, sort of, but vertically, the 2 divs stacked on top of each other, — asdf, May 30 '14 at 14:30
Not 100% sure, but I think you can simply substitute width/left/right for height/top/bottom. — Flynn1179, May 30 '14 at 14:32
I disagree that this is a duplicate. This is asking about a 2x2 grid, and post linked is simply asking about making a div 100% height. It uses similar code, but the end result isn't the same. — Kelderic, May 30 '14 at 14:55

Kelderic · Accepted Answer · 2014-11-17T14:31:34.527

Goal:

You want a 2 x 2 grid of boxes. Each box is to be 50% of the window in height and width. This is actually much easier than you'd think. You don't need .left or .right, you don't need .top .bot. All you need is a single class called .row.

EDIT: You mentioned in comments that you want the width fixed at 1600px; We just need to add width to body.

Code

HTML:

<!-- TOP 50% -->
<div class="row">
   <div>img</div>
   <div>txt</div>
</div>

<!-- BOT 50% -->
<div class="row">
   <div>text</div>
   <div>img</div>
</div>

CSS:

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

body {
    width:1600px;
}

.row {
    width:100%;
    height:50%;
}
.row div {
    width:50%;
    height:100%;
    float:left;
}

Screenshot

This is from the example below, but I've added colors to make it easier to see.

Edit: The Fiddle has changed to include width. My screenshot is before the width, to demonstrate. It'll look a lot wider, because of the fixed width.

enter image description here

Working Example:

I hard coded the height of `body` because the question author wanted the boxes to fill '50%' of the screen. This was 2014, and we didn't have things like `vh` units. — Kelderic, Feb 25 '20 at 13:47

score 2 · Answer 2 · answered May 30 '14 at 14:33

2

There are a few ways to achieve this. I tend to favour this one:

http://jsfiddle.net/YyBW7/

.top, .bot {
    height: 50%;
    border: 1px solid black;
    box-sizing: border-box;
}

.left, .right {
    display: inline-block;
    width: 50%;
    height: 100%;
    margin-right: -4px;
    border: 1px solid red;
    box-sizing: border-box;
}

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

answered May 30 '14 at 14:33

Samih

1,078
9
15

I've updated the post, - view picture – asdf May 30 '14 at 14:49

score 0 · Answer 3 · answered May 30 '14 at 14:37

0

I think there were some things missing from Samih's answer. Probably float See if this gets you better results: jsFiddle

answered May 30 '14 at 14:37

Narong

476
1
3
15

1

Not a fan of floats so it was "missing" on purpose :p. To me using floats for something like this is not semantic. – Samih May 30 '14 at 14:42
I've updated the post, - view picture – asdf May 30 '14 at 14:50