Having 100% control of the document, at least add:
html, body {
height:100%;
width:100%;
}
Then simply have each div that needs 50% of width. Simply add background-color: #hex-code
for a background color.
.element {
width:50%;
float:left; // use float:left to let them float next to each other.
}
Just as I used in This fiddle
Complete CSS:
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.mainDiv {
width:100%;
}
.left-edge {
float:left;
width:50%;
height:200px;
background-color:blue;
}
.right-edge {
float:right;
width:50%;
height:200px;
background-color:red;
text-align:right;
}
Note: HTML documents have a default margin and padding. Therefor, either use a CSS reset sheet or at least add margin:0px
and padding:0px
to the body.