asked on

Float inline block element in BOTTOM-RIGHT corner of another block

Hey there. I've been struggling with this for a while and can't find anything on the web. I thought I'd ask my good friends at ee.

Here's what I'm NOT trying to do:
- position something in the bottom-right corner of my browser window
- position something within a fixed-height element (the height is variable)
- use TABLES. The image needs to be inline with the text, not in a separate column.
- do something funky with scripting to get this to work. CSS should suffice.

Here's what I AM trying to do (text description):
I have a series of paragraphs (<P> tags). At the bottom-right of each paragraph I want an image to float. The text needs to wrap around it. Each paragraph might be a different length. I want the inline block element (in this case, an <IMG> tag) to always be in the bottom-right corner of the paragraph, at the same height as the last line of text.

Here's a visual representation of what I want to do:

texttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttex [image]

texttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttext
texttextte [image]

texttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttext[image]

Here are the two things that have been the most successful to date:

Option 1:

<p>this is my text, blah blah blah<img src="image.gif" style="float:right"></p>

What's wrong with Option 1: the image is aligned right, but vertically, it is always positioned UNDER the last line of text. Typographically speaking, I need the BOTTOM of the image to line up with the baseline of the text. (refer to my cheesy visual example above)

Option 2:

<div>
<img src="image.gif" style="float:right;">
<p>This is some text, blah blah blah</p>
</div>

What's wrong with Option 2: the image is aligned right, but vertically, it lines up with the TOP of the DIV, not the BOTTOM.

How do we get the durned thing at the bottom? 500 points for a solution that works in IE6 (Win) with <DOCTYPE> AT LEAST TRANSITIONAL (if not STRICT). The solution must work with the correct DOCTYPE. I can get it to work in Quirks Mode via any number of methods.

I'm eager to see what the brilliant minds in the ee collective can come up with. Please test your solution before posting!

Thanks!

Tom Auger

seanpowell

>>How do we get the durned thing at the bottom?

You don't Tom, sorry.

Sean

flow79

check this out - i think it'll work for you

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css">

</style>

</head>
<body>

<div class="header">
            <div class="innerheader">
             <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
             blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
             blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
             blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
             blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
             blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
             blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
             blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
<span class="titler"><img src="1.jpg" alt=""></span>
            </div>
</div>

</body>
</html>

tomaugerdotcom

ASKER

Haha. Well, that's definitely to the point. :) Thanks Sean, but let's keep this going a bit longer, shall we?

I've just come up with a solution, but I'm still testing it to make sure it works in all situations. Should have an answer in the next 15 mins.

Cheers

Tom

flow79

please see my solution above

seanpowell

>> let's keep this going a bit longer
It can go as long as you need it to, CSS simply can't handle your requirement :-)

Sean

tomaugerdotcom

ASKER

Hi Flow79. Thanks for the post. Your solution doesn't work as required, because it's using text-align:right in order to get things lined up to the right. It looks visually OK in your example, only because you're using "blah" as your text and it's all the same length. The moment you actually put REAL sentences in there, you'll see that it's all right-justified. I guess I didn't explicity state that it needed to be left-justified text, so I apologize. However, that's what I'm looking for.

Also, this is malformed HTML - there's no closing </p> tag.

Thanks for your input!

Cheers,

Tom

seanpowell

flow...
>>The solution must work with the correct DOCTYPE

That means you need to test with either this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

At any rate, it's still not going to happen becuase CSS "cannot" bottom align an image the way Tom needs it to.

flow79

how about now?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css">

</style>

</head>
<body>

<div class="header">
<div class="innerheader">
<p>
                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tempor.
                               Donec quam velit, semper ac, consectetuer et, suscipit vel, orci. Aenean
                               eget tellus ut tortor tristique cursus. Etiam odio sapien, porta ac,
                               pellentesque in, euismod a, mi. Nam ornare purus nec purus. Nullam pulvinar
                               lectus porta lectus. Phasellus vulputate leo sollicitudin libero. Sed
                               porttitor commodo tortor. Duis vitae purus. Ut bibendum neque id eros.
                               Sed ipsum nulla, nonummy et, fringilla sit amet, facilisis id, ipsum.
                               Sed varius, mauris id commodo elementum, massa sapien lacinia lectus, sit
                               amet dignissim quam tortor id eros. Sed blandit eleifend ligula. Quisque
                               in leo at ante imperdiet tempus. Vivamus ut leo tincidunt mi ullamcorper commodo.
                  <span class="titler"><img src="1.jpg" alt=""></span>
                               </p>
</div>
</div>

</body>
</html>

flow79

putting the loose dtd still lets it work when i use what i just posted

seanpowell

That won't work at all, this is what you get on either IE or Firefox with either doctype.

http://www.pdgmedia.com/code/box.gif

The problem Tom is that the image generates a line box around it, and there is no CSS capability that will place an image at the bottom of the containing box and have the internal content wrap around it.

It simply can't be done, just trying to save you the time...

Sean

ljo8877

You might try using the image as a background for the <p> tag like this

p { background-image: url(image.gif);
background-repeat: norepeat;
background-position: bottom right;
}

This will put the image in the bottom right corner of the paragraph with the bottom of image on the bottom of the paragraph block. Then just put text into the paragraph.

<p>texttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttex </p>

If the image is too high add a <br />

<p>texttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttex<br /> </p>

If you need different images for each paragraph then use ids for the style.

ljo8877

Typos: norepeat should be no-repeat and it take at least 2 <br>s to get an extra line.

tomaugerdotcom

ASKER

Thanks for the active popstings guys. I appreciate the enthusiasm. Or Sean's enthusiastic lack of enthusiasm :)

Well, I got the results I was looking for. Sean, this may be exclusively an IE "Quirk" and frankly, I'm too scared to test it out in Firefox or NS and ESPECIALLY leery of seeing this on a Mac ! (I know, bad bad bad designer. However, my audience is actually Outlook users, and if it works in Outlook and Yahoo Mail! in IE, then I'm a happy man.) So, here we go, check it out:

--------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title>bottom-right test</title>
      <style type="text/css">
            HTML, BODY { height:100%; }
            BODY, P, H1, H2 { margin: 0px; padding: 0px; text-align: left;}
            TABLE, IMG, DIV, TD, TR { padding: 0px; margin: 0px; border: none; border-collapse:collapse;}
            P, TD, A, H1, H2 { font-family: arial, sans-serif; font-size: 11px; font-weight: 500; color: black; }
            H1{ margin-top:10px; font-size:22px; color: #888888; }
            H2 { margin-top:2px; font-size:14px; font-weight:600; color: #888888; }
            P { margin-top: 4px; }
            A { color: #000000; }

            .separator { border-bottom:2px solid #808080; margin-top: 20px; margin-bottom:20px; }
      </style>
</head>
<body>
      <h1>Headline Text</h1>
      <h2>Subhead</h2>
      <p>This is a bunch of information about a really important event that everyone should mark in their calendars. I can't emphasize strongly enough how important this event is. For more information and to register, click <span style="width:75px; display:inline-block; whitespace:nowrap;">[here]</span></p><img src="http://www.nrx.com/newsletter/winter05/more_icon_off.gif" alt="Click for more info" style="float:right; position:relative; top:-10px;"/>
      <div class="separator"></div>

      <h1>Another Headline</h1>
      <h2>Yet another captivating subhead</h2>
      <p>This is even more exciting. I'd just like everyone to read this and think "how <span style="width:90px; display:inline-block; whitespace:nowrap;">exciting!"</span></p><img src="http://www.nrx.com/newsletter/winter05/more_icon_off.gif" alt="Click for more info" style="float:right; position:relative; top:-10px;"/>
</body>
</html>

--------------------------------------------

OK, the magic is in the <img> tag's style: "float:right; position:relative; top:-10px;"
I didn't even think that negative numbers would work in that context, but they do. This, I believe, is a BUG, not a SOLUTION, but it's a bug that works for me right now.

Sean, I'm sure you're cringing right now, especially at the ugly kludge: <span style="width:90px...">. That ugly piece of duct-tape code makes sure that the last word doesn't get clobbered by the image element (it simlulates a 1-line text-wrap).

This may be the single ugliest piece of CSS I've ever done, but right now I don't care.

I'm going to leave this open for a day or two, because if someone can do this nicer (and properly formed - this DOES validate HTML 4.01 Transitional, but it's still ugly as sin) then I want to give my points away!

Thanks to everyone for their help on this.

Tom

GrandSchtroumpf

You can use padding instead of fixing the span's width, this way you don't have to change the display to inline-block (which does not seem to work in FF):

<p>This is a bunch of information about a really important event that everyone should mark in their calendars. I can't emphasize strongly enough how important this event is. For more information and to register, click <span style="padding-right:50px;">[here]</span></p><img src="http://www.nrx.com/newsletter/winter05/more_icon_off.gif" alt="Click for more info" style="float:right; position:relative; top:-10px;"/>

This works fine in both IE and FF

ASKER CERTIFIED SOLUTION

GrandSchtroumpf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GrandSchtroumpf

> you can set the span on the entire content
i just tested that in FF and there is something funny.
When you use "text-align:left" on your paragraph, FF adds the padding to all the lines.
When you use "text-align:justify", it only adds the padding to the last line.

tomaugerdotcom

ASKER

Merci, GrandSchtroumpf, c'est genial. J'essaierai plus tard aujourd'hui.

T

Eternal_Student

Interesting thread ..

I would have probably used a table !!!

tomaugerdotcom

ASKER

Heh. Yeah I know.

In case you're curious, here's how the problem came about: I did a mockup for my client using Photoshop (big mistake) and so of course they liked it. So now I have the challenge of reproducing it, and I need my code to be as compliant as possible (both because I"m a purist and because the end product is an email message so it needs to be clean.

T

GrandSchtroumpf

<:°)

tomaugerdotcom

ASKER

j'm ta barbe.