Floated block elements not to wrap when exceeding parent width

Question

I would like to know if it is possible for block elements, floated in a direction, not to wrap when they exceed the width of the parent element.

That was the quick and short question, for a little more details and an example, please see below.

I have done some research about this and I have not found a definite answer of whether it is impossible or not and that is why I am looking for a definite answer here of whether this can be done or not.

And in the case that it is not possible, I would appreciate a quick explanation about it so that I can improve my understanding of how CSS works.

Please see the following example.

I have 1 "container" div and inside it I have 3 "row" divs. Let's say the "container" has a hypothetical width of 200px and each "row" has a hypothetical width 100px. These values are not specified in the css, they vary based on the content on the page.

Each "row" is floated to the left so that they appear horizontally.

<div class="container">
    <div class="row">
        Some text
    </div>
    <div class="row">
        Some text
    </div>
    <div class="row">
        Some text
    </div>
</div>

.row {
    float: left;
}

In this case, when the total width of the "rows" exceeds the width of the "container", is it possible for the "rows" not to wrap and to remain in a single horizontal line ?

Just to emphasize, I cannot specify an exact width for the "container" in the css because I want the layout dynamic in order to accommodate different content.

Thank you.

Fabrizio Calderan · Accepted Answer · 2012-03-22T17:00:39.203

6

The behaviour you're looking for can be achieved by replacing float: left with display: inline-block, and having white-space: nowrap on the parent container.

See this fiddle: http://jsfiddle.net/XYzea/1/

Blocks inside the container are aligned side by side (like float) but their parent has no width specified. By the way, the wrapper encloses nested divs. inline-block works in all modern browsers except IE<8 in which is not possible to use that display property with any hack if the element is a natural block element

edited Mar 22 '12 at 17:00

answered Mar 22 '12 at 16:39

Fabrizio Calderan

120,726
26
164
177

i think you also need to add some width and `overflow-x: scroll;` – Elen Mar 22 '12 at 16:56
and not specify width of the .row instead – Elen Mar 22 '12 at 17:00
@thirtydot you can't use those hacks on older IE if you're using divs. it works only with inline elements (or with new html5 elements which they don't have a starting display at all) – Fabrizio Calderan Mar 22 '12 at 17:02
No, that's not quite it. `display: inline-block` in IE6/IE7 *only works* on naturally inline elements. The workaround [I was referring to](http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6/5838575#5838575) is `display: inline-block; *display: inline; zoom: 1;`, which allows `inline-block` to work on (almost) all elements in IE6/7, including `div`s. – thirtydot Mar 22 '12 at 18:00
it never worked for me on div with those hacks... I'll investigate further – Fabrizio Calderan Mar 23 '12 at 16:45
I love you. I've been trying to do this for hours. Seriously. I love you. – Tabetha Moe Jul 31 '13 at 01:00

score 1 · Answer 2 · answered Mar 22 '12 at 16:35

1

The only way I can think of is to have the container > wrapper > rows. The container can be dynamic in size and have overflow:hidden while the wrapper will keep the rows in a single line

answered Mar 22 '12 at 16:35

David Nguyen

8,368
2
33
49

try http://jsfiddle.net/kUVHW/1/ : if you set a width of 100px to the container, .rows elements are not in the same line and if you don't specify a width at all the parent will take 100% width – Fabrizio Calderan Mar 22 '12 at 16:57

Floated block elements not to wrap when exceeding parent width

2 Answers2