float bottom right of text problem

Forum Moderators: not2easy

Message Too Old, No Replies

float bottom right of text problem

onassar

5:03 am on Dec 16, 2007 (gmt 0)

text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text text text text
text text text text text text text text text FLOATED HERE
text text text text text text text text text FLOATED HERE
text text text text text text text text text FLOATED HERE

The above is what I need to accomplish; I've been trying for days, and googled way too much, and I can't accomplish the above.

I need the floated area to always be in the bottom right, where there can be 10 or 100 lines of text.

It works perfectly by position absolute on the floated area, and setting it to the bottom right via:
bottom: 0px;
right: 0px;
position: absolute;

and the parent container is position relative, but then the text is overlapped by the 'floated' area.

Any thoughts?

Xapti

1:48 am on Dec 17, 2007 (gmt 0)

All I would recommend is to use absolute positioning, then a dummy transparent image of the same dimensions after the text, so that nothing gets cut off. It will only span 1 line though, so it's still not a great solution.
Another kinda silly solution would be to figure out how many lines the float spans, then place the float on the Nth line from the end, in the middle of the text/content. This would generally require javascript, assuming the float contents is variable height and/or if the page design is not fixed width. In fact in almost any case it may need javascript, and I doubt almost any of it would be easy to code.

[edited by: Xapti at 1:57 am (utc) on Dec. 17, 2007]

onassar

2:03 am on Dec 17, 2007 (gmt 0)

im not worried about the coding. i've got alot of experience with front end and back end coding, but ya, since it's variable, it'd have to be front end, and since there could be 25 blocks of 'text' with a floating element in it, it'd be pretty hacky to do.

Thanks, I figured it was impossible, as noted here:

[forums.devshed.com...]

Xapti

4:37 am on Dec 18, 2007 (gmt 0)

Well I just devised up something not much better than putting the float on the right line, but I think it may be. It's definitely a bit hack-ish but you gotta expect that to do something which the CSS doesn't support.

It consists of floating a vertical "pusher" element (such as img, but it's probably smarter to just use an empty div), then floating the desired object under it, using the clear property. The major problem with this method is you still have to know how many lines there are of text. It makes things MUCH easier though, and could definitely be coded with javascript, just need to change the height of the "pusher" to the height of the container minus the height of the float (assuming your container isn't fixed/min height).

In doing this, it's likely you'll encounter an interesting anomaly where the text will overlap (goes under in IE, goes over in firefox) with the float on the first line, hence I had to add a tweak to prevent that. Here's an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>your example</title>
<style type="text/css">
*{margin:0;padding:0}
body{background-color:#aaa}

img{float:right;background-color:#a40;width:1px;height:3.6em}
.div1{float:right;width:100px;height:2.4em;clear:right}
.div1 div{background-color:#a40;margin-top:1.2em}
</style>
</head>
<body>
<img><div class="div1"><div>test</div></div>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test

</body>
</html>

onassar

4:07 pm on Dec 18, 2007 (gmt 0)

didn't work :(

it doesn't float it at the bottom right of the variable text. I think I'll have to give in to the fact that it can't be fixed :(

Xapti

8:09 pm on Dec 18, 2007 (gmt 0)

Well like I said in the post... It doesn't automatically push it right to the bottom or anything. You still have to manually figure out the height to go down, it's just that it's much much easier to implement now with javascript (for variable length). just a few lines code is all that's needed.

onassar

8:19 pm on Dec 18, 2007 (gmt 0)

ya, i agree, it's def. something i can do with javascript, but the page will load up to 50 blocks with something float to the bottom right, so i don't think it'd be ideal to do something like that on domload or on load or anything, as it'll look kinda crappy :(