html - How to force inline divs to stay on same line?

Question

I'm trying to make a three-column layout. I'd like the width of the left and right columns to be only as wide as their children content. I'd like the center column to expand to fill the remaining space.

I'm trying the following (overview, jsfiddle link included below):

#colLeft {
  display: inline;
  float: left;
}
#colCenter {
  float: left;
  display: inline;
  overflow: none;
  white-space: nowrap;
}
#colRight {
  display: inline;
  float: right;
}

<div id="parent" style="width:100%">
  <div id="colLeft">left</div>
  <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
  <div id="colRight">right</div>
</div>

fiddle: http://jsfiddle.net/5kszQ/

but the center column pushes the right column below it when its content is too long. I'd like all three columns to be inline, and have the center column shrink as necessary. This is what the above is giving me:

enter image description here

instead I would like:

enter image description here

Thanks for any help

score 24 · Accepted Answer

Here's one method using inline-block for the left and middle and position:absolute for the right element.

Example

jsFiddle

HTML

<div id="parent" style="width:100%">
    <div id="colLeft">left</div><!--
    --><div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
    <div id="colRight">right</div>
</div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
}
#parent {
    background-color: #eee;
    height: 48px;
    position:relative;
    overflow:hidden;
    white-space: nowrap;
}
#colLeft {
    background-color: #ff8b8b;
    height: 48px;
    display: inline-block;
}
#colCenter {
    background-color: orange;
    height: 48px;
    display: inline-block;
    overflow: hidden;
}
#colRight {
    background-color: #c3d0ff;
    height: 48px;
    display: inline;
    float: right;
    position:absolute;
    top:0;
    right:0;
}

Since it relys on inline-block, there is a comment in between the <div>s to get rid of the spacing illustrated in this image:

Ugly spacing

text-overflow:ellipsis

To achieve this when using text-overflow:ellipsis you may need to fallback on JavaScript, here is a possible solution (jsFiddle).

Ellipsis using JavaScript

window.onresize = updateDimensions;

function updateDimensions() {
    var parent = document.getElementById('parent');
    var left = document.getElementById('colLeft');
    var right = document.getElementById('colRight');
    var middle = document.getElementById('colCenter');

    middle.style.width = (parent.offsetWidth - right.offsetWidth - left.offsetWidth)  + 'px';
}

score 20 · Accepted Answer

If you are open for some HTML changes, then this should give you exactly what you want:

<div id="parent" style="width:100%">  
  <div id="colLeft">left</div>
  <div id="colwrap">
      <div id="colRight">right</div>
      <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>  
    </div>
</div>

and css to be:

html, body {
  margin: 0px;
  padding: 0px;
}
#parent {
  background-color: #eee;
  height: 48px;
}
#colLeft {
  background-color: #ff8b8b;
  height: 48px;
  float: left;
}
#colwrap{
    overflow:hidden;
    background-color: orange;      
}
#colCenter {
  height: 48px;  
}
#colRight {
  background-color: #c3d0ff;
  height: 48px;
  float: right;
}

jsFiddle: http://jsfiddle.net/gajbhiye/ZX97K/ Hope that helps.

score 3 · Accepted Answer

Fool the browser with saying that it all fits just well on a single line by adding some large margins to the center and right elements, and compensate for that with relative positioning. See updated fiddle.

Markup: remains intact.

Style:

#parent {
  background-color: #eee;
  height: 48px;
  overflow: hidden;
}
#colLeft {
  background-color: #ff8b8b;
  height: 48px;
  float: left;
}
#colCenter {
  background-color: orange;
  height: 48px;
  float: left;
  margin-left: -2000px;
  position: relative;
  left: 2000px;
}
#colRight {
  background-color: #c3d0ff;
  height: 48px;
  float: right;
  margin-right: -2000px;
  position: relative;
  left: -2000px;
}

score 0 · Accepted Answer

Just try this

<html>
<head>
    <style type="text/css">
        #parent {
          word-break:break-all;
        }
        #colLeft {
          float:left;
          max-width: 5%;
        }
        #colCenter {
          float:left;
          max-width: 90%;
        }
        #colRight {
          float: right;
          max-width: 5%;
        }
    </style>
</head>
<body>
    <div id="parent" style="width:100%">
      <div id="colLeft">leftawefawefawefawef</div>
      <div id="colCenter">Some really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjlSome really long text in the center. Some really long text in the center.khjjjjjjjjjjjjjjjjjjjjjjjkjhkjhklkjl</div>
      <div id="colRight">rightaewfaewfawefawef</div>
    </div>
</body>

score -1 · Accepted Answer

Just place child divs into the table cells, while the table into parent div. No styling will be needed

<div id="parent" style="width: 100%">
 <table>
  <tr>
   <td><div id="colLeft">left</div></td>
   <td><div id="colCenter">Some really long text in the center. Some really long text in the center.</div></td>
   <td><div id="colRight">right</div></td>
  </tr>
 </table>
</div>

html - How to force inline divs to stay on same line?

5 回答 5

text-overflow:ellipsis

Related

Reference