CSS to fill screen 50% 50% vertically
css, html
Solution
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:
Problem
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> ```