1
\$\begingroup\$

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.

\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

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: Browser Support Table

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

\$\endgroup\$
2
  • \$\begingroup\$ Yea, but thankfully height is fixed in this case. Otherwise it would be more difficult. (Can't see an obvious solution to that. Tables?) \$\endgroup\$
    – Qtax
    Commented Aug 13, 2012 at 11:42
  • \$\begingroup\$ you can use also tables version if you want: see updated answer. \$\endgroup\$
    – zur4ik
    Commented Aug 15, 2012 at 7:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.