How to force inline divs to stay on same line?
HtmlCssWord WrapHtml Problem Overview
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:
instead I would like:
Thanks for any help
Html Solutions
Solution 1 - Html
Here's one method using inline-block for the left and middle and position:absolute for the right element.
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:
text-overflow:ellipsis
To achieve this when using text-overflow:ellipsis you may need to fallback on JavaScript, here is a possible solution (jsFiddle).
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';
}
Solution 2 - Html
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.
Solution 3 - Html
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;
}
Solution 4 - Html
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>
Solution 5 - Html
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>