Nowrap does not function with float:right

HTML & CSS
1

Hi,
The style white-space:nowrap makes sure that the child elements are not wrapped. It seems, however, that the nowrap only works for float:left elements and not for float:right. See code, when span and input are float left and I reduce the width of my page, the span and input stay on the same line (good). When they have float:right style, they are wrapped. Does anyone know how to avoid this? (have tested IE and FF)


<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style>
        div
        {
            white-space:nowrap;
        }
        span, input
        {
            float:right;
        }
    </style>

</head>
<body>

<div>
    <span>Some text</span>
    <input />
</div>

</body>
</html>

thanks

2

I just tried your example in FF and IE7. The example as is doesn’t wrap at all in FF. In IE7, the input wraps to a new line at smaller widths but then it does it that way too whether it’s floated left or right. If you’re worried about inputs wrapping to a new line, why not just put a min-width on the container?

3

thx, for quick response.
With wrapping, I meant that the input pops to the next line. IE7 I didn’t test, cause it has to function in IE6. But in IE6 and FF2.0 the input moves to the next line when the float:right is there. When the float attribute is not there (not left, but just not there (sorry for confusion)) then the input and the span are keep on the same line, when reducing page width.
For me the question is: How can I make the input and span float right, but avoid the input being moved to the next line. Can’t use min-width due to IE6 (unfortunately).
thx

4

Hi,

nowrap basically suppresses line breaks within text and won’t apply to your floated elements.

You could wrap the input and text in a span that was floated and then they wouldn’t wrap.

e.g.


<div><span><input /><label>Some text</label></span></div>



          
div{white-space:nowrap;}
span{float:right;}
5

thx, for that. That will do it, down side is that the order of input and label is not reversed. What I will do instead is position them absolute with e.g. right:0px and right:100px. That will solve it as well, and I can keep the reversed order.

6

If it needs to be moved for semantic reasons then instead you could attach the label to the input via for=“inputid” then semantically speaking it doesn’t matter where label is as it will have an automatic association with the input. There would then be no need to move the positions of either.

You should do this as a matter of course anyway :).

I am guessing that you need it move it for other logic reasons anyway.

7

yeah, it is a very simplified example of what I’m doing. Designing a tree which can be right folding (standard) and left folding. Left folding: tree node expands to left (with plus/min and icon right of the text). I want the same html structure for both left and right, just different css.
But I found a different solution which does the trick: direction:rtl;. This makes sure that the order is reversed and nowrap.
Thx, Paul and Tyssen for your help.