How to force inline divs to stay on same line?
Solution 1:
Here's one method using inline-block
for the left and middle and position:absolute
for the right element.
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:
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:
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:
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;
}