Menu
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>
924
CSS nowrap value given to white space property for collapsing multiple whitespaces into single line. The nowrap text never displayed in new line, it is always in a single line only. This is a default value for the white-space property. This means text wraps into new line when it is needed. Whitespaces are considered by the web browser.
Specificity is one of the most common causes of CSS not working in HTML. Overflow is one of the most common issues in CSS. At first glance, you may not always be able to pinpoint which element is causing the overflow. Even with dev tools inspectors, it can be an arduous task trying to go through the elements.
The nowrap text never displayed in the new line, it is always in a single line only. To understand the differences between nowrap and pre, pre-line, and normal, we have to understand all the white-space values. This is a default value for the white-space property. This means text wraps into the new line when it is needed.
While sequences of white space still collapse into a single whitespace, the text will never wrap to the next line (never say never, because there is one exception: the text will go on forever unless it encounters a < br/ > tag). Thus, produces the following result: Bizarre, indeed.
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>
Floating elements wrap as white-space: nowrap does not work for block elements but only for inline elements and text.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
