Fixed space between two dynamically sized blocks Trying to come up with a way to have a fixed space (eg 20px) between two blocks on a single line which dynamically resize to fit that line (50% each minus the fixed space between).

I ended up with the following code (demo):

HTML:

&lt;div class="cont"&gt;
    &lt;div class="left"&gt;foo&lt;/div&gt;
    &lt;div class="right"&gt;bar&lt;/div&gt;
&lt;/div&gt;


CSS:

.cont{
    outline: 3px solid #ddd;
    position: relative;
    height: 50px;
}

.cont div{
    border: 1px solid #f0f;
    background: #fef;
    height: 40px;
    position: absolute;
    top: 0;    
}

.left{
    left: 0;
    right: 50%;
    margin-right: 10px;
}

.right{
    left: 50%;
    right: 0;
    margin-left: 10px;
}


Is this a common or a good way to do it? Are there other or better ways (which work in IE &gt;= 7).

Tested successfully in IE8 &amp; IE9, and latest versions of Chrome, Firefox, and Opera.
I guess this is the proper way to have fixed space between to half-fitted blocks, but maybe later you'll have small issuer with container DIV, because child elements are absolute position and parent - relative, so it will not follow heights of child elements.  

for example: http://jsfiddle.net/XfStv/3/ 

.

------UPDATE------

You can also use table property for objects, but it's not supported by IE 7:


here is example of tabled version code: http://jsfiddle.net/zur4ik/ehGRk/