...

View Full Version : float: bottom-right; - I wish



JohnCarter
10-08-2007, 10:40 AM
Hi Guys

I have a problem with positioning an image within a div, with text wrapping around it. I have an example of the problem here http://www.designnine.net/test.html.

If you inspect the html, you will notice I have hacked the image into position at the bottom right.

Aim: To have the image in the bottom-right of the bodyText div with text wrapping.

Attempted Solution: Relatively position the element - problem: the text does not wrap.

I have heard there would be a way to solve this via JS but i don't really have any experience of writing JS, just implementing it.



Does anyone have any suggestions to solve this seemingly simple request of html?

Thanks for your time.

BarrMan
10-08-2007, 10:46 AM
From what I can see in your example: The text is already wrapping the Image and the Image is located at the right bottom of the BodyText.
Are you sure this is what you meant?

JohnCarter
10-08-2007, 10:54 AM
Well what it is, is that there are a number of pages following this page format. All with differing text lengths. What happens is that I have to adjust the padding/margin on the bodyText and bodyImage elements to allow for the differing text lengths.

Also this is not cross-browser/platform compatible as Macs have varying font sizes etc.

vtjustinb
10-08-2007, 02:48 PM
Really there's no great CSS solution if you want the text to wrap. What I would suggest is doing a little javascript to make it happen:

First, modify your code to include a little inline span that we can use to shift the image down:

<div id="box">
<span id="pushdown"></span>
<img src="something.jpg" alt="" />
<p id="boxContent">Text text blah balh blah</p>
<div style="clear:right"></div>
</div>

We'll need to float the shim and the image to make this work, so the CSS would look like this:

#box img {
clear:right;
float:right;
}
#box p {
margin:0;
}
#pushdown {
width:1px;
height:1px;
float:right;
}

And then the javascript onload to make it all happen:




var img_height = 150; // height of the image to push down

function push_it() {
var box = document.getElementById('box');
var pushdown = document.getElementById('pushdown');
boxHeight = box.offsetHeight;
pushdown_height = (box_height - img_height);
pushdown.style.height = (pushdown_height)+'px';
}

window.onload = push_it;

Blue_Jeans
10-08-2007, 08:27 PM
Hmm... I don't understand what's wrong with what you have. As long as you have fixed widths and heights, your solution works. If you add more content, your layout breaks anyways, so it's not a big deal.

vtjustinb
10-08-2007, 08:41 PM
Hmm... I don't understand what's wrong with what you have. As long as you have fixed widths and heights, your solution works. If you add more content, your layout breaks anyways, so it's not a big deal.

Well in his second reply he mentioned that this layout gets used on multiple pages of varying content size. This, combined with what would happen to firm heights when text is resized, would set the layout up to break pretty easy (at the very least require a lot of maintenance).

You could make a rough stab at it through ems instead of pixels to handle the text resizing issue, but even still you'd have to adjust the margins page by page and that'd be a pita.

The only way to do it generically would be a javascript approach like one I outlined above.

JohnCarter
10-19-2007, 11:54 AM
Hi guys,

Sorry for the lack of replies to your suggestions, I have been afk. The site that I have put together can be seen here: www.designnine.net/previews/solarcreative/index.html (http://www.designnine.net/previews/solarcreative/index.html)

Using my hacky but acuurate method seen in the source of the pages, I have managed to get the pages how I want them. Apart from these two pages:

http://www.designnine.net/previews/solarcreative/tv.html - problem in IE6 with the image being too high.

http://www.designnine.net/previews/solarcreative/small.html - problem in Safari with the image being too low.

Now I know my method of alignment isnt pretty but it is working in all browsers and platforms apart from those two pages. Can you guys see if there is any reason for it, because I'm sure I can't. :confused:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum