#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446

    Float left and right in Opera


    Say I have the code:

    Code:
    <div style="float: left">left</div>
    <div style="float: right">right</div>
    In Opera, Firefox and IE, "left" will be on the left side of the scren, "right" will be on the far right. Now let's say I nest those two in a parent. I want the parent to expand with the child's content, so I float it too:

    Code:
    <div style="float: left;">
    	<div style="float: left">left</div>
    	<div style="float: right">right</div>
    </div>
    In Firefox in IE, "left" is still on the far left and "right" on the far right. In Opera, it collapses the div so they're right next to each other, or "leftright".

    Now I could set a width of 100% on the parent, but the situation I'm actually using something like this in is more complicated -- padding, margins, etc. So setting a width of 100% makes the parent overflow it's parent nodes.

    I've tried not floating the parent and setting it to overflow: auto, but that doesn't seem to work either. Is there an easy fix I'm missing?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Overflow:auto; doesn't work? Odd. Could you give us a link to the page in question?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo