Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: floats in Opera and FF/IE

Bottom of Page

1 to 5 of 5

  1.  
    • CommentAuthordraco
    • CommentTimeMay 25th 2006
     permalink
    <h1 style="border-bottom: 1px solid #000;">outer test <span style="float: right;">internal test</span></h1>

    In Opera 8.53, the "internal test' text is pushed to the right side by side with the "outer test" text.

    But in IE6/Firefox 1.5, the "internal text" will be pushed down as though it's a new block element itself. (And this can be accomplished by setting "outer test" to block element too.

    According to css 2.1, http://www.w3.org/TR/CSS21/visuren.html#float-position, looks like Opera is right, but I'm not sure. So what gives, which browser is right?

    As I'm currently using negative margin tops for the "internal test" to be pushed up to be side by side with the "outer test" for IE and Firefox, any idea how to work around the limitation so it will work in both (or all browsers)? And without additional markup, that is.

    Thanks in advance!
  2.  permalink
    Man, I've had a look and that's a doozy!

    I see the same results as you describe and couldn't figure out a workaround using floats. Not sure which browser is correct - but the example in red at the end of 9.5.1 states:

    This HTML fragment results in the b floating to the right.
    <P>a<SPAN style="float: right">b</SPAN></P>
    If the P element's width is enough, the a and the b will be side by side. It might look like this: [pic of how your example looks in Opera].

    So Opera is probably right, but then on the other hand the spec also says that float:right generates a block box so why should it still appear "inline"?

    Complicated issue. Sorry I'm no help. The only way I achieved something like what you want (the Opera behaviour) was to set position:relative on the h3 and position:absolute; right:0; on the span. So not using floats at all.

    I'm hope someone else can shed some light on this.
    • CommentAuthordraco
    • CommentTimeMay 26th 2006
     permalink
    I tried to use that solution too, but I am just looking around to see if someone could shed some lights on which browser is right, and whatnot. ;)

    But right now, I'm still floating stuffs around as my readership of Opera fans are low, and a little misalignment won't kill (for now).

    Thanks ;) If anyone else could share, I'll be looking forward to.
    • CommentAuthorKevin
    • CommentTimeJun 8th 2006
     permalink
    try this.

    <div> (the container)
    <div style="width: 50%; float: left;">
    <h1>text</h1>
    </div>

    <div style="text-align: right;">
    <p>right aligned text</p>
    </div>
    </div>

    Works in all three browsers. There are probably more ways to do it, but I find this the fastest. :D
  5.  permalink
    Yes that will work of course. I was assuming that there was a good reason why it had to work with Draco's existing markup.

1 to 5 of 5

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page