How do I float an image to the lower right while still preserving text flow?

August 8, 2006 6:42 PM

CSS filter: I would like to place an image in the lower right corner of a div, with text flowing around it. Warning, 17kb, 300x300 image inside.

Setup: I have been handed a design by a department which designs for print. The usual "The Web is Not Print" speech fails to impress the higher-ups. If they can see it in Quark or Photoshop, it "should" be able to look like that on the Web.

I have a div in an HTML document that contains a block of text. I would like an image to sit in the lower right corner of the div, precisely aligned, with the text flowing around it. The image may not obscure the text, nor the text obscure the image. I have enclosed a example Photoshopped image of my goal, using lorem ipsum text, with the blue square representing the image to be floated to the lower right. This text may be changed to list or a paragraph, etc. The actual image is rectangular.

Problem Constraints:

1. The text must flow around the image. This seems to rule out position: absolute (which removes the image from the document flow), and the background-image property, which does something similar. Position: relative leaves a gaping hole.


2. The text changes, and, to keep things accessible, I'd like this to remain actual text, rather than a Photoshopped piece of text made into images.


3. No tables. I'd like to go pure CSS.


4. I could use judicious break tags to artificially create my own flow, but then that poses problems with users who increase the size of their text.


5. Works in the major (Internet Explorer 6, Firefox, Safari) browsers.

Have the constraints rendered the goal insoluble? Is this a "wait for CSS3" problem? The upper right corner would be a snap with a simple float. Elements, being like helium balloons in a leftward breeze, want to be on the opposite corner from where my goal is. I'm not finding much on the web about this issue, but perhaps I'm not phrasing it correctly in my searches. Or I might just be overthinking it. Perhaps a particular webforum would specialize in these things? Sorry for the long post. CSS issues are rarely ... terse in their explanation.

posted by adipocere to computers & internet (27 comments total)

I know I am going against your CSS purity, but a simple table cell with an align=right tag for the image does this. Can you expound on the CSS purity issue?
posted by The Deej at 6:56 PM on August 8, 2006

This is a "use a table and have it done in 2 seconds" thing, not a "wait for CSS3" thing.

I really, really don't understand the whole "tables are evil, I must do all things in CSS only" thing that seems to be the rage these days. There are things for which tables are good, and this is one of them.
posted by twiggy at 7:05 PM on August 8, 2006

With every site redesign, in comes a wave of accessibility "experts" (many of whom do not follow their own advice) who complain about how the site is executed.

It's something of a personal goal of mine, because our last site redesign had to rely on tables, mostly due to a combination of time, my CSS knowledge at the point, the browser support, and the layout itself. I'm sick of using tables and would like to keep everything as accessible as is humanly possible.

Also, a table (with two columns and two rows) with the image in one-fourth of it (a td in the lower-right) wouldn't help in this case, as the text would have to flow through the other three cells. rowspan and colspan can only form rectangular blocks.

Avoiding tables is important if your site wants to hit as many accessibility points as possible. Namely, if you get federal grant money, etc. I have to consider how this whole thing is going to look like in a variety of scenarios - with CSS turned off, blind readers, etc. It's not just for the sighted.
posted by adipocere at 7:14 PM on August 8, 2006

Here's what you want, done in JavaScript due to the shortcomings of CSS. clicky...... A google for css float image bottom right reveals plenty of people asking your question and getting the same answer. You've got 2 options: javascript, or tables.
posted by twiggy at 7:18 PM on August 8, 2006

I can't see the graphic, adipocere -- probably because it's on a non-standard port and I'm at work and our firewall doesn't like it? Can you put it somewhere else? I'm sure I'm not the only one.

But even without seeing it, I'll bet you can't have what you want in the browsers you want, because it involves vertical positioning.

Vertical positioning, the way we can do it in table cells, just isn't part of CSS. So aligning a block to the bottom of another block just isn't there in the language.

Here's a question: does it actually contribute anything to the real design of the website to have this element positioned at the bottom of another element? As in, does the website only make sense if that element is in that position? Or is it just the way the designer wants it? I'll bet you a million dollars it's the latter. So, tell the designer to suck it up.

And, you know what?

When things actually, really, need to be lined up in certain ways because their contents relate in some organisational way to other parts of that page? In, say, columns and rows? That's what you're allowed to use a table for! That is a table! 99.9% of the time alignments like this are essentially meaningless, they're just the visual preference of a designer.
posted by AmbroseChapel at 7:28 PM on August 8, 2006

Yeah, I have no control over what the designer wants. I just get to execute what I'm given. Yes, that's a bad idea. Yes, having a designer who doesn't know HTML and just puts things together in photoshop is like asking a 4 year old with a box of crayons, a sheaf of paper, and an inner ear disorder to redesign the Twin Towers, then handing off said scribbles to engineers and telling them to make it happen, no matter what. I have no control over that. Large organizations frequently have disconnects like that. Everybody knows who the designer is, my feedback isn't important, or even welcomed.

http://66.167.102.28/ask-metafilter/example.gif is where the image is now, no non-standard ports, AmbroseChapel. It's not very exciting to look at, I'm afraid.

What I'm getting is that the constraints have rendered the problem insoluble. If there's a known name for this particular issue, I can use that in my defense when I have to break one of the aforementioned constraints.
posted by adipocere at 7:45 PM on August 8, 2006

Well, the constraints on using CSS versus tables come from you, right? So if you really have to do exactly what the designer wants and that over-rides any rule about using modern code, then do it, and when asked about tables being used for layout, that's your excuse.

Or don't do it, and when asked why not, say "bottom-positioning isn't supported in the browsers we're coding for".

At this point, it's really just an administrative issue at your end.
posted by AmbroseChapel at 8:02 PM on August 8, 2006

The CSS stuff is a push from an entirely different direction. Not that I'm against it, I in fact fully agree with it, but it's once again out of my hands and not merely administrative. If I have a set of incompatible requirements, I have to be able to back up that they aren't compatible in some documentable fashion, rather than me just not being clever enough to figure it out.
posted by adipocere at 8:17 PM on August 8, 2006

So send them a link to this thread, and point out my google search, where people are asking on forums all over how to do the same thing and the answer is "you can't".
posted by twiggy at 8:26 PM on August 8, 2006

Or quietly go to the designer and ask them please to have a sudden change of heart.
posted by AmbroseChapel at 8:41 PM on August 8, 2006

After 20 minutes of googling and 30 minutes of trying it, I'm also reasonably convinced you can't do this with CSS.
posted by Hildago at 9:44 PM on August 8, 2006

I have to be able to back up that they aren't compatible in some documentable fashion

It's going to be hard to prove a negative. Can you ask them to show you an example of a Web site where this is being done?
posted by Hildago at 9:47 PM on August 8, 2006

I can get pretty close with CSS at my defined font size, but you'd need JavaScript to accommodate changing the text size or changing the size of the box.
posted by kirkaracha at 10:24 PM on August 8, 2006

Here you go.

Only CSS and HTML. No images. Basically, to get this to work without JavaScript or images, you will need to place your "SOMETHING ELSE" div inline with the text of the main body container at the point you want it to start.

View the source to better understand what I mean.

Good luck! Feel free to use it if it meets your needs. I know you would have to reposition the "S..Else" div inline with the main text as it changes, but this would be simple cut/paste and the layout meets the requirements you gave (or should I say, "that were given to you").
posted by criticman at 10:43 PM on August 8, 2006

Oh yeah, it works in IE 6, Firefox 1.5.0.6, Opera 9.01 on WinXP SP2 for certain.
posted by criticman at 10:46 PM on August 8, 2006

criticman, that breaks if the user has adjusted his font size.
posted by Sxyzzx at 11:21 PM on August 8, 2006

BTW I don't think using tables breaks any Federal accessibility rules. Check out the "Section 508 compliance" website here. 508 compliance is only required for government sites, if I am correct, but the same rules may apply if you are seeking a Fed grant. I don't think the rules are anti-table.

Anyway.... just FYI, if it proves useful.
posted by The Deej at 11:36 PM on August 8, 2006

Avoiding tables is important if your site wants to hit as many accessibility points as possible.

That's absolute hogwash, and obviously a statement from someone who's never done a real accessibility tests. JAWS, WindowEyes and IBM Home Page Reader will all handle tables just fine.

The real problem is that if you use tables, you can't have any text flow into the cells either above or to the left of your floating image. There is no pure-CSS solution that will handle browser resizes/font adjustments on the fly. You're left with javascript (dynamically positioning the box on render, then dynamically moving it around whenever the page changes--ugh!), Flash, or another design.
posted by Civil_Disobedient at 4:27 AM on August 9, 2006

The real real problem is that tables are for tabular data, not positioning. Period. Maintaining a table-based layout is a thousand times harder than maintaining a website with the semantic-HTML and the presentation-CSS that have been both well designed and properly separated. "Do it klugey just for this one thing" is, yes, a slippery slope.
posted by Plutor at 6:18 AM on August 9, 2006

Exactly, Plutor. Plus, there are some groups here who are very heavily anti-table. Sadly, its pretty easy to find firm opinions without expertise.

We had some, ah, gently-phrased complaints about the previous design from a disability organization, Civil Disobedient, and, whether tables were the issue or not, it's become a point of concern. Just another constraint.

Criticman, that might just work! That's quite a nifty trick, one which I will have to test out.

I'm often given sets of constraints that I don't like, either. As I am not exactly high up on the totem pole, arguing about it is pointless. I just have to see if it can be done. You can't always Kirk your way out of every Kobayashi Maru, that is, change the rules of the test. Sometimes you have to die trying! :)
posted by adipocere at 6:49 AM on August 9, 2006

FIXED the font size "issue." All you have to do is set the font & size in CSS. This way if someone has a different default font, you can override their preference.

Of course, if they have used Accessibility settings to ignore fonts and sizes, then you are SOL if you want to do this without JavaScript, but I am still a fan of my method as it is still readable and does not "break" if a user has enabled Accessibility options...all text will still be present on their screen and be readable to them.
posted by criticman at 8:02 AM on August 9, 2006

if they have used Accessibility settings to ignore fonts and sizes

Or if they're using a browser other than IE. Other browsers don't let pages override the user's font size setting in the first place.

The other problem with that approach is that it relies on you knowing where in the text to stick the div. I guess if this is just for a single page with text (both inside and outside the floating box) that will never change, it could work, but if it's being updated periodically, or this element is present on multiple pages with the text stored in a CMS or XML file or something, I think this approach becomes untenable.
posted by staggernation at 8:26 AM on August 9, 2006

Criticman, that's not actually positioning anything, that's just sticking the image in the right place so that it looks like it's being positioned in the corner. It breaks the minute you change font size or change the content of the text area. Imagine using that on every page of the site, with different text on each page -- you'd have to do every page by hand, and then go in and move the image every time you made a change to the site.
posted by Hildago at 12:13 PM on August 9, 2006

Hidalgo. Learn to read code. There is NO IMAGE in my demo.

You people need to listen to the OP's needs. He wanted to do this in CSS to meet the requirements he was given. I provided him with a solution. I even said you would have to change it each time and it is not practical if this is for every single page of a lage, complex website.

So, my method works for a single page that you would occasionally alter content on. That is it. Yes, if the user has font sizes and families set to override the page, then it will not display properly. It will however still show up, so if said user had the fonts enlarged due to vision problems, all of the sites content will be there for them to read.

As I said before, agreeing with others, if he wanted this to work with varying text content and sizes, JavaScript would be required.
posted by criticman at 2:37 PM on August 9, 2006

Hidalgo. Learn to read code. There is NO IMAGE in my demo.

My apologies, I assumed the div was supposed to represent an image. Also, it's Hildago.

In any case your "method" isn't a solution to the problem, and it disregards his constraints 2 and 4. You seem awfully proud of yourself for someone who just dropped a div into some text.
posted by Hildago at 4:41 PM on August 9, 2006

<sides with Hildago on this one>

That "solution" is so hacky it doesn't really qualify.
posted by AmbroseChapel at 7:07 PM on August 9, 2006

I prefer to call you Hidalgo, like the horse.

2 said no images...and since I have no images, I believe it meets that.

4 said he did not want to use BR, which I do not use, b/c he would LIKE to keep it the same if they resize text.

And I am not proud. Get this through your thick skulls people. He wanted a CSS only solution. There is not a non-hacky way to do this in only CSS. Maybe when the next version is fully supported across all browsers there will be a method you can use, but at this very moment, you cannot achieve a consistent, non-hacked way to do this with only CSS.

I merely provided him with an option. He appreciated that: "Criticman, that might just work! That's quite a nifty trick, one which I will have to test out." I stated the limitations of it in terms of font resizing.

My pride has only come into play when you, Mr. Horse, decided to continue attacking the hack I provided as the closest solution you can do with only CSS. I apologize on behalf of every browser made for their failure to support another CSS method to do this. For them, I am truly sorry.
posted by criticman at 9:26 AM on August 10, 2006