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 html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Stack Overflow 3150509 - Felipe</title>
    <style type="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>
    <form method="post" action="#" id="bar_top_container">
        <div class="bar_top_block">
            <label for="select1">Obviously I am a label: </label>
            <select id="select1"><option value="asdf">asdf</option></select>
        </div><!-- no whitespace
        --><div class="bar_top_block">
            <label for="select2">I'm a label too and I need a for attribute: </label>
            <select id="select2"><option value="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><option value="asdf">asdf</option></select></label>
  <label>asdf: <select><option value="blah">-- select action --</option></select></label>
</form>

Hope it helps.


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