Question

How can I fit these 3 child boxes (2 .child, 1 .screen) inside parent (.parentDiv) to perfectly occupy the horizontal space.

I do not want to do this using javascript.
Fiddle for reference, what I want is here

HTML:

<div id="parentDiv">
    <div class="child"></div>
    <div class="child"></div>
    <div class="screen"></div>
</div>​

The .screen element can be before after or a middle element.

CSS:

#parentDiv {width:600px; height:400px; margin:10px auto; border:1px solid #000}

.child {width:100px; border:1px solid blue; float:left; height:100%}
.screen {float:left; border:1px solid red; height:100%;}

.child, .screen {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
​

Answer 1

On .screen, add overflow: hidden and remove float: left.

See: http://jsfiddle.net/thirtydot/s3zUd/1/

More information.