PDA

View Full Version : Stop a float


ShadowArcher
04-23-2011, 01:49 PM
Hi, I have an issue with a floating div. Is there a way to have said div floated right, but have it stop at a cetain point?

To be more precise, lets say my wrapper div is 2000px (hypothetically; and let's pretend nothing can be outside this, and for the sake of ease, it's exactly the size of my browser window). The main content div is, say, 1000px. Then I have an image div inside the wrapper but outside #content, at 500px and floated right. Now, that is all well and good, and does what I want - sticks to the right-hand side of the browser and stays stuck there when I resize the window.

What I want, though, is to have that 1000px to the right of #content in which to have #image move about, BUT I want it to stop short of overlapping #content. So in otherwords, when the browser is shrunk far enough that the left side of #image reaches 1000px I want it to stay put until the window is stretched out again.

A lot of writing to explain a simple thing, but I've seen many threads all over the internet with people asking the same thing and getting completely irrelavant replies.

Thanks

DWcourse
04-23-2011, 02:50 PM
check out the min-width and max width properties for your wrapper

http://www.w3schools.com/css/pr_dim_min-width.asp

http://www.w3schools.com/css/pr_dim_max-width.asp

ShadowArcher
04-25-2011, 10:19 PM
Thank you for the reply. I'm not sure how widths help, though....?

DWcourse
04-25-2011, 10:32 PM
It would keep the layout from shrinking to the point where the two objects overlap. Maybe that's not what you intended though.

Ricky55
04-26-2011, 07:33 PM
I'm not sure exactly what you mean either.

If you could post a link or a sketch, if I understand what you mean I'm sure I'll be able to sort it for you.

ShadowArcher
04-29-2011, 11:07 AM
I know now what DWCourse means. I'll do a quick test site for it. Ricky, you mean after all that typing you don't know what I'm talking about?! lol. Basically, there's content on the left, which doesnt move. Then there's content floated right, so it's always stuck to the right-hand side of the browser window, no matter how wide the window is made. That's what I want, except I want the content on the right to stop moving when the window is shrunk to a certain point, so that it doesn't overlap the content on the left. That's as simple as I can explain it, sorry. I don't have a link either. DWcourse's suggestion should hopefully help though. Thanks; I'll be back later wit hthe results...

ShadowArcher
04-29-2011, 12:01 PM
Actually, thinking about it, I don't think that can do what I want it to. I thought I'd done a fairly good job of explaining, apparently not :( To clarify, I'm not talking about a liquid layout, this page is fixed. But the image I have on the right side is cut in half, which looks fine when it's against the side of the window, but if the window was stretched out and the image stayed in one place, then it would look ridiculous. So I float it right, and it does what I want. However, if the window is made smaller, the image obviously overlaps (or in this case, underlaps - but that's just as bad looking) the other content. So what I want is simply for that image to get to a certain point, past which it will stay put rather than continuing to move in with the browser window, but then when the window is stretched out beyond that point once again, it'll go back to sticking to the right.

Is that any clearer?
Thanks

domedia
04-29-2011, 02:06 PM
Use the css property min-width on #content.

And yes, it took a few read throughs to understand your post 8)

ShadowArcher
04-29-2011, 02:34 PM
Well thank you for taking the time to read through it a few times :) So you're saying that assigning a min-width to the div that doesn't do anything will prevent the other div from overlapping it? I'll give it a try then.

EDIT:
Waaaiiit a minute! I get it now! lol. It's finally sunk in. Are you thinking, domedia, that my image div (the one I want stuck to side up to a point) is INSIDE the #content? If so, I get what you mean - set a min-width on #content instead of a set width, so that the floated #image will cause #content to stretch out however far it is needed, and stay stuck to the side, but because of the min-width, it'll stop at the point I tell it. Took a while to sink in.

EDIT:
Waaaiiit another minute! If #image is floated to the right of #content, how would it also stay stuck to the right of the screen? I don't know if I'm failing to convey my problem properly or if I'm just being pretty stupid and not understanding your solutions.

ShadowArcher
04-29-2011, 03:22 PM
Ok, ignore the above edits; I finally have it working. Thanks for the help :)

domedia
04-29-2011, 03:34 PM
haha, awesome! Waiting a few minutes does help ;-)