It's Friday, I know. I should be out partying. That's a couple hours from now 
I've almost come up with a way to "float" an image between two columns of text and have the text in each column wrap around the image. The only requirement is the image has to appear at the top of the text block. I've placed an example on the web:
<!-- m --><a class="postlink" href="http://users.tm.net/gburghardt/crosscolumn/">http://users.tm.net/gburghardt/crosscolumn/</a><!-- m -->
It works on all PC browsers (the ones that count) except for IE6
So here's the challenge: Get it to work on IE6/PC. The page linked-to above has some instructions and things I've already tried.
No hurry. I don't plan on using this anytime soon, and if you can figure it out, by all means use it.
Enjoy!I just rewrote the top half of your page, I tried to keep as many id's as possible the same. I removed ALL CSS hacks and modified the description at the bottom.
I was working on a version that didn't need the place holder div on the right hand side but I couldn't quite work it. If I did crack it then it would have suddenly been possible to have the image anywhere in the column.
If I come up with the goods on that one I'll let you know.
The various information about browser testing is all in the page, what I didn't mention was that I can only test in Windows.So, is there any way to make this work if IE isn't in quirks mode? notice that if you remove the <?xml version="1.0" encoding="windows-1252"?> line IE breaks entirely...I'm sure I could work something out.
Perhaps I should have given more information on the problem with IE 6:
#floatContainer isn't positioned correctly - not even close. See the attached screenshot. The light gray boxes in either shot show the float container DIV.
The Mozilla screen shot is on the left and the IE6 shot is on the right.
In Moz it barely shows #floatContainer to the right of the picture. In IE6 (5.5 and 5.01/PC are fine) the float container is more than 100 pixels too far right, and the picture doesn't even cover #floatContainer.
In the messing around that I've done, floating #floatContainer to the left triggers the bug. Floating the DIV right does not.
This is using lavalamp's first example.It looks as though the IE6 screen shot was taken while the xml decleration was removed. The second script that I posted sorts out that problem.
I think that the problem occurs because of the:
#rightouter{margin-left:50%;}
Which I copied from toicontien's without really testing it first. In the second script, I took that out and replaced it with a little workaround.Ok. Still no go. Here are the requirements:
1) The text must be in columns. If one column is longer than the other, either one must still take up the same amount of width. So, margin-left: 50% is needed for #rightOuter.
2) The layout must work if #wrapper has a width set in pixels, ems, exs, or a percentage.
3) Text must be resizable and must still flow correctly around #floatPlaceholder.
I think the problem with IE6 is a positioning and float bug.
Assuming #rightOuter has a left margin of 50%:
It's a positioning bug because the #floatContainer appears starting at 50% to the right in the screen. It's a float bug because #floatContainer is only mis-positioned when floated left. Floating it right is just fine.
The floating works both left and right if no left margin is applied to #rightOuter.
Lavalamp, your solution did work, however, if the right column is longer than the left, the right column wraps under the left. Your example would work in most cases though. There's no reason for the second column of text to be longer than the first. That would mean the first column needs more text that's all. I'm still trying to figure out how to fix it so #rightOuter can have a left margin. But due to IE's @$#%ty positioning and floating, that may be impossibe.
Thanks for all the work! We'll consider it done for right now with your example Lavalamp
EDIT: Lavalamp's example still works without the XML declaration, for those who want to keep IE6 in Standards mode.Lol, is that all you want?
Alright then, since you asked so nicely.Gracias mi amigo. I also placed the image down one paragraph on each side and the text wrapped around all four sides. And the kicker is Moz and the Boyz (standards compliant browsers) print the document this way too! Internet Explorer, on the other hand... well. It's kinda like telling a one-armed man to clap. It looks funny and it just doesn't work
I've attached the same version, but I changed some of the text and the formatting of the CSS to make it easier to read (in my opinion).Originally posted by toicontien
Gracias mi amigo.No problem, it's all good practice.
I would like to stress again that no hacks were used in the CSS.
If I get it to work anywhere in the text (even in mid-sentence) then I'll post in this thread again, but I doubt I'll be able to.Actually, I was already able to do just that. All you've got to do is change the floatPlaceholder DIV to a span and place it inside a paragraph. You want the span to float the same number of words down as the image itself and you're golden. The example at my web site can even use percentage widths, ems, exs, you name it. It seems to be pretty much bullet proof.Have you got a link to that page in particular? I had a quick browse round but I didn't spot it in action.
I was also trying to get it to work without the placeholder at all, just trying to get the image itself to push the text over. I've had a couple of near misses but I couldn't quite crack it.
Why not submit the page to ALA (<!-- m --><a class="postlink" href="http://www.alistapart.com/contribute/">http://www.alistapart.com/contribute/</a><!-- m -->)? This is the kind of stuff that they publish.Actually, I e-mailed ALA already and gave them a link - <!-- m --><a class="postlink" href="http://users.tm.net/gburghardt/crosscolumn/">http://users.tm.net/gburghardt/crosscolumn/</a><!-- m -->
I haven't heard back from them yet though
I'm such a freakin' geek.You might wanna remove the margin-bottom: 0.5em; from the #floatPlaceholder and the #actualPicture because otherwise there's an unsightly gap under the image.
I've almost come up with a way to "float" an image between two columns of text and have the text in each column wrap around the image. The only requirement is the image has to appear at the top of the text block. I've placed an example on the web:
<!-- m --><a class="postlink" href="http://users.tm.net/gburghardt/crosscolumn/">http://users.tm.net/gburghardt/crosscolumn/</a><!-- m -->
It works on all PC browsers (the ones that count) except for IE6
So here's the challenge: Get it to work on IE6/PC. The page linked-to above has some instructions and things I've already tried.
No hurry. I don't plan on using this anytime soon, and if you can figure it out, by all means use it.
Enjoy!I just rewrote the top half of your page, I tried to keep as many id's as possible the same. I removed ALL CSS hacks and modified the description at the bottom.
I was working on a version that didn't need the place holder div on the right hand side but I couldn't quite work it. If I did crack it then it would have suddenly been possible to have the image anywhere in the column.
If I come up with the goods on that one I'll let you know.
The various information about browser testing is all in the page, what I didn't mention was that I can only test in Windows.So, is there any way to make this work if IE isn't in quirks mode? notice that if you remove the <?xml version="1.0" encoding="windows-1252"?> line IE breaks entirely...I'm sure I could work something out.
Perhaps I should have given more information on the problem with IE 6:#floatContainer isn't positioned correctly - not even close. See the attached screenshot. The light gray boxes in either shot show the float container DIV.
The Mozilla screen shot is on the left and the IE6 shot is on the right.
In Moz it barely shows #floatContainer to the right of the picture. In IE6 (5.5 and 5.01/PC are fine) the float container is more than 100 pixels too far right, and the picture doesn't even cover #floatContainer.
In the messing around that I've done, floating #floatContainer to the left triggers the bug. Floating the DIV right does not.
This is using lavalamp's first example.It looks as though the IE6 screen shot was taken while the xml decleration was removed. The second script that I posted sorts out that problem.
I think that the problem occurs because of the:
#rightouter{margin-left:50%;}
Which I copied from toicontien's without really testing it first. In the second script, I took that out and replaced it with a little workaround.Ok. Still no go. Here are the requirements:
1) The text must be in columns. If one column is longer than the other, either one must still take up the same amount of width. So, margin-left: 50% is needed for #rightOuter.
2) The layout must work if #wrapper has a width set in pixels, ems, exs, or a percentage.
3) Text must be resizable and must still flow correctly around #floatPlaceholder.
I think the problem with IE6 is a positioning and float bug.
Assuming #rightOuter has a left margin of 50%:
It's a positioning bug because the #floatContainer appears starting at 50% to the right in the screen. It's a float bug because #floatContainer is only mis-positioned when floated left. Floating it right is just fine.
The floating works both left and right if no left margin is applied to #rightOuter.
Lavalamp, your solution did work, however, if the right column is longer than the left, the right column wraps under the left. Your example would work in most cases though. There's no reason for the second column of text to be longer than the first. That would mean the first column needs more text that's all. I'm still trying to figure out how to fix it so #rightOuter can have a left margin. But due to IE's @$#%ty positioning and floating, that may be impossibe.
Thanks for all the work! We'll consider it done for right now with your example Lavalamp
EDIT: Lavalamp's example still works without the XML declaration, for those who want to keep IE6 in Standards mode.Lol, is that all you want?
Alright then, since you asked so nicely.
Gracias mi amigo. I also placed the image down one paragraph on each side and the text wrapped around all four sides. And the kicker is Moz and the Boyz (standards compliant browsers) print the document this way too! Internet Explorer, on the other hand... well. It's kinda like telling a one-armed man to clap. It looks funny and it just doesn't work I've attached the same version, but I changed some of the text and the formatting of the CSS to make it easier to read (in my opinion).Originally posted by toicontien
Gracias mi amigo.No problem, it's all good practice.
I would like to stress again that no hacks were used in the CSS.
If I get it to work anywhere in the text (even in mid-sentence) then I'll post in this thread again, but I doubt I'll be able to.Actually, I was already able to do just that. All you've got to do is change the floatPlaceholder DIV to a span and place it inside a paragraph. You want the span to float the same number of words down as the image itself and you're golden. The example at my web site can even use percentage widths, ems, exs, you name it. It seems to be pretty much bullet proof.Have you got a link to that page in particular? I had a quick browse round but I didn't spot it in action.
I was also trying to get it to work without the placeholder at all, just trying to get the image itself to push the text over. I've had a couple of near misses but I couldn't quite crack it.
Why not submit the page to ALA (<!-- m --><a class="postlink" href="http://www.alistapart.com/contribute/">http://www.alistapart.com/contribute/</a><!-- m -->)? This is the kind of stuff that they publish.Actually, I e-mailed ALA already and gave them a link - <!-- m --><a class="postlink" href="http://users.tm.net/gburghardt/crosscolumn/">http://users.tm.net/gburghardt/crosscolumn/</a><!-- m -->
I haven't heard back from them yet though
I'm such a freakin' geek.You might wanna remove the margin-bottom: 0.5em; from the #floatPlaceholder and the #actualPicture because otherwise there's an unsightly gap under the image.