SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nowrap does not function with float:right

    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)
    Code:
    <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. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <div><span><input /><label>Some text</label></span></div>
    Code:
              
    div{white-space:nowrap;}
    span{float:right;}

  5. #5
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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. #7
    SitePoint Enthusiast Quark's Avatar
    Join Date
    Sep 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •