...

View Full Version : Opposing, offset floats in CSS



Reoer
04-02-2009, 07:58 PM
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:
http://img5.imageshack.us/img5/4159/example1.gif

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

Firefox results:
http://img11.imageshack.us/img11/9002/example2.gif

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?

Rowsdower!
04-02-2009, 09:46 PM
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...

Reoer
04-03-2009, 01:31 PM
Well, in IE where the red box aligns depends on window size.

Yes, that is the desired result.

abduraooft
04-03-2009, 01:55 PM
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.

SB65
04-03-2009, 02:52 PM
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:


<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 (http://www.w3.org/TR/CSS21/visuren.html#floats) 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.

Excavator
04-03-2009, 05:30 PM
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.

Rowsdower!
04-03-2009, 09:01 PM
How about something like this:


<!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. :thumbsup:

drhowarddrfine
04-04-2009, 01:15 AM
Yes. You'll never get IE to attempt to work like more modern browsers, such as Firefox, without a proper doctype.

Reoer
04-04-2009, 01:45 PM
Here's my thoughts after messing about with this one for a bit.
...
Edit: Found this (http://www.w3.org/TR/CSS21/visuren.html#floats) 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! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum