Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Opposing, offset floats in CSS

    I'm trying to achieve a page with vertically offset sandbags on both sides of flowed text. I have an example page that works in IE, but not Firefox.

    http://www.tomhare.com/mag/test.php You can view the source here.

    IE results:


    This is what I want. vertically offset sandbag divs. The red on the right is level with the green and gray blocks.

    Firefox results:


    The red div is for some reason lined up with the last (pink) left-floated one.

    I'm guessing this is one of those situations where IE is doing it wrong, but more usefully, and Firefox is doing it correctly, but not letting me do what I need?

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Well, in IE where the red box aligns depends on window size. Drag your browser window smaller and see what I mean. I've played around a bit and I have to say so far I'm not having much luck with this problem...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Well, in IE where the red box aligns depends on window size.
    Yes, that is the desired result.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by Reoer View Post
    Yes, that is the desired result.
    The position of the second box set depends on the zoom-level/font-size of the text before it. You may notice the change in IE too by zooming your text.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Here's my thoughts after messing about with this one for a bit.

    If you delete all the paragraphs, then in Firefox the position of the right floated divs doesn't change at all. In IE7 the right floated divs go to the top of the page.

    At first the Firefox behaviour didn't make sense at all, but then looking at the resultant code with the paras deleted:

    Code:
    <div style="background: red; float:left;clear:left;height:50px;width:150px;"></div>
    <div style="background: red; float:right;clear:right;height:50px;width:150px;"></div>
    <div style="background: orange; float:left;clear:left;height:50px;width:200px;"></div>
    <div style="background: green; float:left;clear:left;height:50px;width:250px;"></div>
    <div style="background: gray; float:left;clear:left;height:50px;width:300px;"></div>
    <div style="background: pink; float:left;clear:left;height:50px;width:350px;"></div>
    <div style="background: orange; float:right;clear:right;height:50px;width:200px;"></div>
    <div style="background: green; float:right;clear:right;height:50px;width:250px;"></div>
    <div style="background: gray; float:right;clear:right;height:50px;width:300px;"></div>
    <div style="background: pink; float:right;clear:right;height:50px;width:350px;"></div>
    I started thinking, isn't this actually what you'd expect - the first right floated div occurs after the last left floated div, because that's where it is in the code? If I then move, for example the top right floated div up underneath the top left floated div in the code, it then appears at the top of the screen, because that's what the code says.

    Or am I just confused?

    Edit: Found this in the CSS spec which seems to confirm that FF is doing what it is supposed to:

    The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
    Last edited by SB65; 04-03-2009 at 03:52 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Reoer,
    It does act a lot different with a DocType.
    There is a sticky in this forum about DocTypes, also a link in my sig about them.
    There's also links about validating in my sig.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    How about something like this:

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>Sandbags?</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
    <div style="width:1px;height:100px;float:right;"></div>
    <div style="background: red; float:left;clear:left;height:50px;width:150px;"></div>
    <div style="background: orange; float:left;clear:left;height:50px;width:200px;"></div>
    <div style="background: green; float:left;clear:left;height:50px;width:250px;"></div>
    <div style="background: red; float:right;clear:right;height:50px;width:150px;"></div>
    <div style="background: gray; float:left;clear:left;height:50px;width:300px;"></div>
    <div style="background: orange; float:right;clear:right;height:50px;width:200px;"></div>
    <div style="background: pink; float:left;clear:left;height:50px;width:350px;"></div>
    <div style="background: green; float:right;clear:right;height:50px;width:250px;"></div>
    <div style="background: gray; float:right;clear:right;height:50px;width:300px;"></div>
    <div style="background: pink; float:right;clear:right;height:50px;width:350px;"></div>
    
    <p style="margin:0px;line-height:25px;text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl dui, imperdiet quis, tristique sed, aliquam quis, lorem. Aliquam placerat est nec neque. Suspendisse laoreet metus in dui. Nunc ut eros ac mi pretium porttitor. Maecenas tristique. Phasellus sodales. Vivamus non ipsum ac risus fringilla fringilla. Nam eu lectus. Nunc vitae dui nec nunc convallis tincidunt. Sed lacinia sagittis augue. Nunc pulvinar volutpat dui. Morbi eget neque vitae augue consectetur semper. Aliquam lobortis, leo et interdum aliquam, velit nisl auctor mi, ac volutpat orci ipsum at dolor. Maecenas justo nisl, sodales et, luctus sit amet, rutrum id, mi. Aliquam quis purus. Ut ornare volutpat erat. Fusce vehicula nisl in magna.</p>
    <p style="margin:0px;line-height:25px;text-align:justify;">Praesent rhoncus, augue et dictum dictum, sapien justo iaculis erat, quis vestibulum orci urna ac felis. Sed nisi arcu, vestibulum vel, feugiat id, hendrerit eget, risus. Vivamus eros augue, adipiscing non, egestas vel, luctus id, tellus. Fusce dignissim, arcu nec ultrices varius, lorem ante mollis ante, eget gravida sem felis eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit erat a velit. Etiam in erat. Etiam felis ipsum, bibendum non, rutrum lobortis, bibendum bibendum, massa. Nullam egestas eros sed nibh. Phasellus a neque. Vivamus sagittis aliquet libero. Nunc fringilla augue eget ligula. Vestibulum vulputate molestie magna. Morbi convallis. Cras ut erat. Ut bibendum dignissim est. Praesent consectetur risus eget felis. Cras ac mauris.</p>
    <p style="margin:0px;line-height:25px;text-align:justify;">Quisque eu risus quis erat lobortis condimentum. Sed erat. In massa dui, congue quis, dignissim non, imperdiet non, nisl. Nam orci augue, accumsan non, ullamcorper nec, eleifend ut, turpis. Nullam mi elit, commodo ac, semper id, fringilla ac, orci. Aenean semper facilisis orci. Etiam malesuada lacus ac mi lacinia ultricies. Praesent massa. Nullam nisl diam, pharetra vel, aliquam porta, feugiat eu, odio. Morbi faucibus, risus sit amet porta dictum, nisi odio pretium magna, eu lacinia ligula sapien ac odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut vitae sem. Nunc quam. Donec ac nisi ut ante facilisis molestie. Quisque faucibus laoreet nisi.</p>
    <p style="margin:0px;line-height:25px;text-align:justify;">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vitae elit vel nisl auctor tempus. Suspendisse faucibus, mi ac ultricies aliquet, ligula ipsum consectetur massa, et vulputate lacus odio vel sem. Aliquam id libero. Integer elit purus, laoreet a, vehicula nec, tincidunt non, nibh. Suspendisse potenti. Suspendisse ultrices quam at diam. Phasellus at augue. Suspendisse potenti. Integer est nisi, ultricies vitae, sollicitudin sit amet, blandit non, nunc. Nam tincidunt nisl at enim. Pellentesque tellus. Proin eros diam, congue ultrices, fermentum nec, pharetra cursus, nulla. Nullam consectetur euismod elit. Nunc ut mauris. Ut sed leo sit amet sapien mollis interdum. Integer commodo. Curabitur pellentesque elementum erat.</p>
    <p style="margin:0px;line-height:25px;text-align:justify;">Nulla nec lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vitae leo. Fusce at justo vel erat aliquam pellentesque. Fusce elit. Maecenas euismod tellus imperdiet tortor. Mauris in est vitae enim adipiscing mattis. Integer quis sapien eu eros iaculis auctor. Nulla enim justo, pharetra nec, luctus et, mollis nec, neque. Maecenas quis lectus eu sem pellentesque bibendum. Etiam vitae ligula et arcu aliquet mattis. Donec mauris. Duis nec libero quis ante scelerisque commodo.</p>
    
    
    </body>
    </html>
    This is all valid and seems to give the same appearance in both browsers. I haven't tested it extensively, but let me know if this works for you.

    One thing it definitely WON'T do is move the right floats up and down based on the browser's size so if that is an important feature don't get excited about this fix.
    Last edited by Rowsdower!; 04-03-2009 at 09:08 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Yes. You'll never get IE to attempt to work like more modern browsers, such as Firefox, without a proper doctype.

  • #9
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Here's my thoughts after messing about with this one for a bit.
    ...
    Edit: Found this in the CSS spec which seems to confirm that FF is doing what it is supposed to:
    All right, thanks for finding that in the specifications. I suppose that means the desired result can't be achieved.

    I can't alternate the left and right divs because they are coming to me in a group from an external program, so, grouped as the are, they cannot overlap. I understand now, thanks for the help!


  •  

    Tags for this Thread

    Posting Permissions

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