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:
<div class="cont">
<div class="left">foo</div>
<div class="right">bar</div>
</div>
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 >= 7).
Tested successfully in IE8 & IE9, and latest versions of Chrome, Firefox, and Opera.
