CSS to fill screen 50% 50% vertically [duplicate]

Question

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> 

Answer 1

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.

Working Example: