Why is this CSS nowrap not working?

Question

I\'m trying to keep the bar_top_container div from wrapping it\'s contents no matter how wide the page is (i.e. both selects should appear always on the same line), this is not

Answer 1

You can have both block and inline properties for an element if you display it as ... inline-block!

Here is your code corrected and working:

• span.bold are labels

• a label is associated to its form element via the for/id attributes

• bar_top_block is an id used twice. Should be a class

• no need for float: left; as display: inline-block; is used

• thus no need for a clearing element either

• the .bar_top_block elements are also displayed inline so any whitespace between them is displayed as whitespace. To avoid this, I added a comment that avoid any whitespace though still letting the HTML code readable. The text within is 'no whitespace' so the developer will know that this comment is there for a reason and shouldn't be stripped :)

• you can remove the width on body, it's just here for the example

• you can play with the overflow property on the container

• as IE7 and below don't understand the inline-block value on block elements like div, you must use display: inline and give the element the hasLayout with, for example, zoom: 1;

• the best way to target IE7 and below and only those browsers is with a conditional comment

• I added support for Fx2 but this is merely for historical reasons :)

.

    
    
    
    


    

        

            Obviously I am a label: 
            asdf
        

            I'm a label too and I need a for attribute: 
            -- select action --