Home/ Questions/Q 889929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T13:38:43+00:00

I’m trying to keep the bar_top_container div from wrapping it’s contents no matter how

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0