Question

I have two divs under one parent div, the parent div has 100% width:

<div id="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

The conditions are:

• I want two divs on the same line.
• The right div may or may not be present. When it is present, I want it to always be fixed on the right. However, the left div must be elastic – it’s width depends on its content.

I have tried both float:left, and dispaly:inline-block but neither solution seems to work.

Any suggestion would be appreciated.

Answer 1

I’d go with @sandeep’s display: table-cell answer if you don’t care about IE7.

Otherwise, here’s an alternative, with one downside: the “right” div has to come first in the HTML.

See: http://jsfiddle.net/thirtydot/qLTMf/
and exactly the same, but with the “right div” removed: http://jsfiddle.net/thirtydot/qLTMf/1/

#parent {
    overflow: hidden;
    border: 1px solid red
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    background: #888;
}
.left {
    overflow: hidden;
    height: 100px;
    background: #ccc
}
<div id="parent">
    <div class="right">right</div>
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div>
</div>