CODEWITHSUNDEEP
htmlcssword-wrap
user1219278
user1219278

Reputation: 1909

How to force inline divs to stay on same line?

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

Upvotes: 53

Views: 103561

Answers (6)

Hensembryan
Hensembryan

Reputation: 1087

Just try this

#parent {
  word-break: break-all;
}

#colLeft {
  float: left;
  max-width: 5%;
}

#colCenter {
  float: left;
  max-width: 90%;
}

#colRight {
  float: right;
  max-width: 5%;
}
<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>

Upvotes: 0

David W
David W

Reputation: 49

With the combination of setting of DIV: display, float and position, I have made three child DIVs staying on one line.

Parent DIV: display:inlin-block First two child DIVs:float: left; Right child DIV:float:right; display:inline; position:absolute;

.parent {
           width:100%;
            margin: 0 auto 10;
            clear:both; 
            margin-top:3px;
            display:inline-block;
            padding: 0.5em 0 0.5em 0;
        }
        .colLeft {
          float: left; 
          margin: 5px auto;
        }
        .colCenter {
          float:left; 
         position:relative;
          width:85%;
          margin: 5px auto 5px 5px;
        }
        .colRight {
           float: right;            
           display: inline; 
           position:absolute;
           margin-left: 2px;
        }
    <body>
    <div class="parent">
      <div class="colLeft">[0002]</div>
      <div class="colCenter">Very long text. Input the paragraph which describes the technical field here.Input the paragraph which describes the technical field here.Input the paragraph which describes the technical field here.Input the paragraph which describes the technical field here.Input the paragraph which describes the technical field here.Input the paragraph which describes the technical field here.</div>
      <div class="colRight"><b>*Note:123</b></div>
    </div>
    </body>

Upvotes: 0

webcom
webcom

Reputation: 1

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>

Upvotes: -1

NGLN
NGLN

Reputation: 43669

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;
}

Upvotes: 3

Dinesh Gajbhiye
Dinesh Gajbhiye

Reputation: 684

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.

Upvotes: 21

Daniel Imms
Daniel Imms

Reputation: 50229

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';
}

Upvotes: 25

Related Questions