CODEWITHSUNDEEP
htmlcss
Morgan Cheng
Morgan Cheng

Reputation: 75998

Why does this "clear: both" doesn't prevent wrapping?

I suppose a DIV with clear:both style can make its parent containing DIV doesn't wrap, but below HTML seems not work in that way.

If the browser window is narrow, the second DIV "OK OK" still wraps to next line.

<div style="overflow: hidden;">
  <div style="float: left; overflow: hidden; white-space: nowrap">
    Hello world 1 Hello world 2 Hello world 3
  </div>
  <div style="float: left; overflow: hidden; white-space: nowrap">
    OK OK OK OK OK OK OK OK
  </div>
  <div style="clear: both;">
  </div>
</div>

Did I miss something?

Upvotes: 2

Views: 4446

Answers (3)

Code_Tech
Code_Tech

Reputation: 795

Add two new properties to your style & it will work !

text-align: left;
    width: 1010px;

                 <div style="float: left; overflow: hidden; white-space: nowrap;
                  text-align: left;width: 1010px;">
                  Hello world 1 Hello world 2 Hello world 3
                 </div>

                <div style="clear: both;">
                </div>
                <div style="float: left; overflow: hidden; white-space: nowrap;
                         text-align: left;width: 1010px;">
                        OK OK OK OK OK OK OK OK
                       </div>
                       <div style="clear: both;">
                        </div>
                        </div>

Upvotes: 1

womp
womp

Reputation: 116977

I think you might be misunderstanding the "clear" property. It doesn't control wrapping specifically, it controls the placement of floating elements that come afterwards. There is nothing in your html above that is preventing the second div from flowing to the next line.

Here is a pretty good rundown on clearing elements: http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c

In order to make the layout not flow, you will likely have to specify a hard width on your container div.

Upvotes: 6

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107508

Because the two inner divs are floated left, they will wrap when the browser window becomes too narrow. I would suggest that you specify a width on the outer div (the one you have overflow: hidden on). That way the two inner divs can float, but they won't wrap when the browser shrinks.

    <div style="overflow: hidden; width: 600px;">
            <div style="float: left; overflow: hidden; white-space: nowrap">
                     Hello world 1 Hello world 2 Hello world 3
                </div>
            <div style="float: left; overflow: hidden; white-space: nowrap">
                            OK OK OK OK OK OK OK OK
                </div>
            <div style="clear: both;">
            </div>
    </div>

If you want more control, you might have to implement the min-width hack using expressions in IE; min-width: works in FF.

Upvotes: 1

Related Questions