We help IT Professionals succeed at work.

2 divs inline, overflow:hidden on the left one

MihaiAndrei asked

I have 2 divs which contain text of a variable length that I want to be displayed inline, in only 1 text line. The first div have float:left; the second have float:right;.

The issue I have is when the left div have a very long text inside that won't fit. I've put a fixed height and overflow:hidden on it, but it is not working unless I also put a fixed width, which I really try to avoid.
Watch Question

Technical Support
Top Expert 2005

The problem is that variable-width floats will give variable results.

A possible work-around to achieve the desired effect of a two-column layout with one variable-width column is to use a floated div for the first column, but remove the float from the column that you would like to resize automatically. Because the floated column is separated from the normal document flow, the regular div should wrap around the the floated one.

I'm not sure if this is what you're looking for. If not, maybe you could post an example, maybe a screenshot.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.