Web Analytics Made Easy - StatCounter Opposing, offset floats in CSS - CodingForum

Announcement

Collapse
No announcement yet.

Opposing, offset floats in CSS

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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?
    Tags: clear, css, float
  • #2
    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

    Comment

    • #3
      Originally posted by Rowsdower! View Post
      Well, in IE where the red box aligns depends on window size.
      Yes, that is the desired result.

      Comment

      • #4
        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.
        Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

        Comment

        • #5
          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; Apr 3, 2009, 10:52 AM.
          Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
          Read Steve Krug's book Don't Make Me Think - essential reading on web usability
          I don't recommend much, but I do recommend Clook for UK web hosting

          Comment

          • #6
            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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

            Comment

            • #7
              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!; Apr 3, 2009, 04: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

              Comment

              • #8
                Yes. You'll never get IE to attempt to work like more modern browsers, such as Firefox, without a proper doctype.
                Is IE9 a modern browser?
                IE9 is at least 2 years behind the modern web.

                Comment

                • #9
                  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!

                  Comment

                  Previous template Next
                  Working...
                  X