2 DIVs aligned right and left - background color

Question

I have 2 DIVs inside a main DIV. One aligned to the right and the other aligned to the left. How do I make the background colour of each sub DIV 50% of the screen width? Also when the window is resized and when the DIVS are one over the other, how do make the background colour of each DIV continue to the edge of the window?

.mainDIV{
    max-width:1366px;
        padding: 0;
}
.eft-div{
    background:#333;
    float:left; 
        padding-left:10px;
}
.right-div{
    background:#ccc;
    float:right;
        padding-left:10px;
}

Answer 1

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.

Answer 2

Width: 50% for each div and box-sizing: border-box. Here is the code:

<div class="mainDIV">
    <div class="left-div">A</div>
    <div class="right-div">B</div>
</div>

.mainDIV {
    max-width:1366px;
    padding: 0;
    box-sizing: border-box;
}
.left-div {
    background:#333;
    float:left;
    padding-left:10px;
    width:50%;
    box-sizing: border-box;
}
.right-div {
    background:#ccc;
    float:right;
    padding-left:10px;
    width:50%;
    box-sizing: border-box;
}