CSS two columns dynamic width

Question

I have a single-line div with content on the left and on the right:

---------------------------------------------------------------------------
|Single line of text                          Icon and single line of text|                                                
---------------------------------------------------------------------------

If there is no enough space I want the right content to take the width it needs while the left content should take the rest of the available width (with overflow hidden to keep a single line).

The problem is that the content (left & right) is dynamic, so I do not know its width in advance.

Any hint? Thanks

thirtydot · Accepted Answer · 2015-08-20T18:48:28.057

2

Give this a whirl:

http://jsfiddle.net/thirtydot/fjJMX/191/

CSS:

#lineContainer {
    overflow: hidden; /* clear floats */
    outline: 1px solid red;
    width: 300px /* just to make demo easier */
}
#lineLeft {
    overflow: hidden; /* hide extra text */
    white-space: nowrap;
    background: #f0f

}
#lineRight {
    float: right;
    background: #ccc
}

HTML:

<div id="lineContainer">
    <div id="lineRight">right right right right right</div>
    <div id="lineLeft">left left left</div>
</div>

edited Aug 20 '15 at 18:48

answered Apr 25 '11 at 22:47

thirtydot

224,678
48
389
349

It works perfectly. I had assumed that floated elements needed to have a defined width. Thanks! – Javier Ferrero Apr 26 '11 at 09:44
Maybe there was a bug in that version of Firefox? It works for me now in Firefox 40.0.2. – thirtydot Aug 20 '15 at 18:51
Too bad you have to put the right content above the left in the HTML. Can you come up with a solution where you keep your html in the (for me) more natural order with the left content first, and the right after? I'm afraid screen readers will read the content in the wrong order otherwise – Tobbe Mar 09 '16 at 13:57
1

@Tobbe: You can use a `display: table-cell` based solution instead, [example here](http://stackoverflow.com/questions/6938900/how-can-i-put-an-input-element-on-the-same-line-as-its-label/6938990#6938990). – thirtydot Mar 09 '16 at 20:56
Yes, that's what we ended up doing. Thank you :) – Tobbe Mar 10 '16 at 06:26

score 0 · Answer 2 · answered Jul 13 '15 at 04:48

0

Float only one of the columns should work.

.left {
   float: left;
}
.right {
   overflow: hidden;
   padding-left: 20px;
}

See updated fiddle

answered Jul 13 '15 at 04:48

Tepken Vannkorn

9,648
14
61
86

CSS two columns dynamic width

2 Answers2