Finding div width - css

Question

I have three divs. The two smaller ones are inside the same container, the third div.
The first child div is 350x350 px big.
The third div is 89% of another container div, meaning I dont know the size of it.
I want to make the second child div span between the edges of the first child div and the container div.
Basically:
<div id="container">
<div id="first_child" style="width:350px; height:350px;"> </div>
<div id="second_child" style="width:???px; height:350px;"> </div>
</div>
How do I figure out the width of my second_child element if I want the second_child element to span precisely between the first_child element and the edge of container?
Edit:
Uploaded a quickly drawn image. The big black square is container, measurements are unknown. The red box is first_child, the blue box is second_child. I want to find the width for second_child so it will stretch from the end of first_child to the right edge of container.

Answer 1

You can do using CSS calc():
#second_child {
width: -moz-calc(100% - 350px);
width: -webkit-calc(100% - 350px);
width: calc(100% - 350px);
}
For IE8 and lower you'll have to use jQuery or javascript

Answer 2

I think what you need is to use some css like so:
#container {
width:89%;
height:350px;
}
#first_child {
float:left;
width:350px;
height:350px;
}
#second_child {
height:350px;
margin-left:350px;
}
Here is a working example (with added styles to see the effect)

Answer 3

A good answer with pure CSS was given above, so I'll just answer the question of "how do I find the width needed?" in javascript.
// This is assuming there is no padding.
totalWidth = document.getElementById('container').offsetWidth;
firstChildWidth = document.getElementById('first_child').offsetWidth;
document.getElementById('second_child').style.width = (totalWidth - firstChildWidth) + 'px';

Answer 4

Using jQuery:
var containerWidth = $('#container').width();
$('#second_child').width(containerWidth - 350);

Answer 5

You can do that with pure css positioning, since you know how big the first child is:
#container {
position:relative
}
#first_child {
width:350px;
height:350px
}
#second_child {
height:350px;
position:absolute;
top: 0;
left:350px;
right:0;
}
Note that the container div has position:relative. This is necessary to make position:absolute use the top left corner of the container div instead of the body.