Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Why Is This Css Nowrap Not Working?

Post a Comment
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 worki

Solution 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 :)

.

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"lang="en"xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8" /><title>Stack Overflow 3150509 - Felipe</title><styletype="text/css">body {
    width: 300px;
}

#bar_top_container {
    overflow: auto;
    white-space: nowrap;
    border: 1px solid red;
}

.bar_top_block {
    display: -moz-inline-stack; /* Fx2, if you've to support this ooold browser. You should verify that you can still click in the elements, there is a known bug with Fx2 */display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 1px solid #4965BB;
}

    </style><!--[if lte IE 7]><style type="text/css">
.bar_top_block {
    display: inline;
    zoom: 1;
}
    </style> <![endif]--></head><body><formmethod="post"action="#"id="bar_top_container"><divclass="bar_top_block"><labelfor="select1">Obviously I am a label: </label><selectid="select1"><optionvalue="asdf">asdf</option></select></div><!-- no whitespace
        --><divclass="bar_top_block"><labelfor="select2">I'm a label too and I need a for attribute: </label><selectid="select2"><optionvalue="blah">-- select action --</option></select></div></form></body></html>

Solution 2:

Floating elements wrap as white-space: nowrap does not work for block elements but only for inline elements and text.

Solution 3:

I'm suggesting to use a valid form usage:

<form><label>select1: <select><optionvalue="asdf">asdf</option></select></label><label>asdf: <select><optionvalue="blah">-- select action --</option></select></label></form>

Hope it helps.

Post a Comment for "Why Is This Css Nowrap Not Working?"