Question

I have two DIVs inside one DIV. One of the DIVs is floated left, and so, the other div is to fill outer window.
If I enlarge or shrink the outer DIV I want inside DIVs to fill outer DIV in any case.
The sample code:

<div id="main_container">
    <div id="left_container"></div>
    <div id="right_container"></div>
</div>​

and CSS rules are

#main_container {
    border: 1px ridge blue;
    overflow: hidden;
    height: 93%;
}

#left_container{
    margin: 10px;
    height: 100px;
    border: 1px solid red;
    float: left;
    overflow: hidden;
    min-width: 200px;
}

#right_container{
    margin: 10px;
    height: 100px;
    border: 1px solid magenta;
    min-width: 200px;
    overflow: hidden;
}

​

Here is the jsfiddle code.

Reize the html window, you will see red one is not filling it when the other is on the bottom.

Edit: To clarify, I added images

Answer 1

@media screen and (max-width: 441px) {
    #left_container{
        float: none;
    }
}

441px just an example (two blocks min-width + side margins + border – 1).