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-20 18:48:28Z

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, 2015 at 18:48

answered Apr 25, 2011 at 22:47

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Javier Ferrero Over a year ago

It works perfectly. I had assumed that floated elements needed to have a defined width. Thanks!

thirtydot Over a year ago

Maybe there was a bug in that version of Firefox? It works for me now in Firefox 40.0.2.

Tobbe Over a year ago

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

thirtydot Over a year ago

@Tobbe: You can use a display: table-cell based solution instead, example here.

Tepken Vannkorn · Accepted Answer · 2015-07-13 04:48:36Z

0

Float only one of the columns should work.

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

See updated fiddle

answered Jul 13, 2015 at 4:48

Tepken Vannkorn

9,72514 gold badges63 silver badges86 bronze badges

Collectives™ on Stack Overflow

CSS two columns dynamic width

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related