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 working however when the page width is to small for them to both fit on one line, how can i fix this?

Styles:

#bar_top_container { position: relative; white-space: nowrap; }
#bar_top_block { float: left; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; }
#clear { clear: both; }

HTML:

<div id="bar_top_container">
 <div id="bar_top_block">
  <span class="bold">select1:  </span>
   <select><option value="asdf">asdf</option></select>
 </div>
 <div id="bar_top_block">
  <span class="bold">asdf: </span>
   <select><option value="blah">-- select action --</option></select>
 </div>
 <div id="clear"></div>
</div>

score 17 · Accepted Answer · edited May 09 '12 at 11:21

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>

To eliminate the spaces between elements, you can use `font-size: 0;` on its parent. Then wherever inside you need, just define the right size of the text, for example: `.parent { display: inline-block; font-size: 0; } .parent * { font-size: 12px }`. Good luck. — Slavik Meltser, Dec 20 '12 at 15:57
@SlavikMe I do not use this method because, for better accessibility, I work with `em` unit for font-size and `0` will break everything. See for example [C14: Using em units for font sizes](http://www.w3.org/TR/WCAG20-TECHS/C14) WCAG 2.0 Technique — FelipeAls, Dec 23 '12 at 19:38
@FelipeAls: Thanks mate! Very useful post. It really saved the day for me. — YashG99, Dec 02 '13 at 20:23
An alternative for `em` unit without this drawback is using `rem` units, which doesn't depends on its direct parent font-size and has a good [browser support](http://caniuse.com/rem). This way, you could set a font-size: 0 for the parent without any side effect. — Alcides Queiroz, Jan 15 '14 at 18:13
@AlcidesQueirozAguiar I still have to support IE8 (because it still has a noticeable marketshare due to MS not releasing a better version of IE on Win XP, companies that have chosen to be stuck on IE8, etc). `rem` vs `em` is a debate we have had for years with my boss: whether one indicates everything in rem and prior in em as a fallback (more work, quite useless if it's already OK in em); or by not having a cascade of `font-size` em can be used as rem would: a font-size on root and a font-size on final block element like hN or p or li or td but never on article, div, section, aside, table, ul — FelipeAls, Jan 16 '14 at 04:13

score 4 · Answer 2 · answered Jun 30 '10 at 15:03

4

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

answered Jun 30 '10 at 15:03

jantimon

36,840
23
122
185

wait for HTML5 ;) - there are alot of HTML4 CSS work-arounds. Search for float layout. – jantimon Jun 30 '10 at 15:06

score -1 · Answer 3 · answered Dec 20 '12 at 15:53

-1

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.

answered Dec 20 '12 at 15:53

Slavik Meltser

9,712
3
47
48

Why is this CSS nowrap not working?

3 Answers3

Linked