inline-block doesn't work as expected with long content?

Question

I have two divs that I want inline (one on left, one on right). The one on right contains a line of text. I want it to always be a single line of text, and ellipsize when necessary. I must not be doing the inlining correctly, because when my text is too long, the right div jumps below the left one. Example:

<!doctype>
<html>

<head>
    <style type="text/css">
    #panelLeft {
      display: inline-block;
      width: 50px;
      height: 20px;
      background-color: #f00;
    }
    #panelRight {
      display: inline-block;
      background-color: #0f0;
      /* width: 200px; */ works ok if explicitly sized
    }
    #test {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    </style>
</head>

<body>
    <div id="panelLeft">
    </div>
    <div id="panelRight">
        <div id="test">
            This is some text that's longer than usual and that I'd like to have ellipsized, and forced to a single line, always.
        </div>
    </div>
</body>      
</html>

http://jsfiddle.net/JEQPL/1/

If instead I specify a width for panelRight (which is equal to or shorter than remaining space), then my divs are on the same line, and ellipsizing appears correctly. How can I get this to work when I don't know the exact width panelRight will be?

Thanks

score 1 · Accepted Answer · answered Feb 02 '13 at 20:11

Instead of inline-block I would look at floating the left column and adapting the right columns margin to make up for the space required by the left column.

Here's a fiddle of the technique I typically use: http://jsfiddle.net/q3rEX/

The HTML:

<div class="left">Left Bar</div>
<div class="right">There is a bunch of text in here and I don't want it to jump down a line cause that stinks!</div>

And the CSS:

.left { float: left; width: 25%; background: red; }
.right { margin-left: 25%; background: green; }

Then you can apply you text-wrap prevention, ellipses, etc to the .right to get it dialed in.

This also has benefits in that inline-block isn't supported in some older browsers.

score 0 · Answer 2 · answered Feb 02 '13 at 20:15

Put them both inside a Parent Div with position:relative;.

<div id="parentDiv">
    <div id="panelLeft">
    </div>
    <div id="panelRight">
         <div id="test">
         </div>
    </div>
</div>

Then give the #panelRight a position:absolute;.

#parentDiv
{
    position:relative;
}
#panelRight
{
    position:absolute;
    right:0px;
    left:60px; // #panelLeft has a width of 50px, so change it the way you like.
}

Check it out : http://jsfiddle.net/AliBassam/BpQqu/

score -1 · Answer 3 · edited May 23 '17 at 12:08

You can set the width of the right div to be 100% minus the width of the left column by using one of the techniques described in the answers to this question: Is it possible to make a div 50px less than 100% in CSS3?

Using calc():

#panelRight {
  display: inline-block;
  background-color: #0f0;
  max-width: calc(100% - 50px);
}

http://jsfiddle.net/JEQPL/9/

Or, absolute positioning:

#panelRight {
  display: inline-block;
  background-color: #0f0;
  position: absolute;
  left: 50px;
  right: 0;
}

http://jsfiddle.net/JEQPL/10/

inline-block doesn't work as expected with long content?

3 Answers3

Linked