Question

I want to set div#divcontainerdata to fit the full width of the screen using CSS.

My simplified HTML is:

<div class="container">
    <div class="leftDiv2" style="width:300px;float: left;"></div>
    <div class="leftDiv1" style="width:300px;float: left;"></div>
    <div class="divcontainerdata"></div>
</div>

I would like the final product to look like this:

|              |                  |
| div:leftdiv1 | divcontainerdata |
|              |                  |
| div:leftdiv1 |                  |

How can I achieve this?

Answer 1

Set float: left; clear: left to first two divs and then set margin-left: 300px for the third div.

.leftDiv1, .leftDiv2 {
    width: 300px;
    float: left;
    clear: left;
}

.divcontainerdata {
    margin-left: 300px; /* the width of the floated divs */
}

Demo