Why is this div jumping outside the wrapper?

[nixnerd]

First off, let me say this site has been insanely helpful and it’s one of the best I’ve ever seen as far as tutorials and tips go.

I can’t seem to figure out what I’m doing wrong here. Why is my twitter “badge/box” jumping outside the wrapper when it’s positioned inside of it? Everything else follows the rules but the twitter logo is going all “freebird” on me.

Here is the url:

test.elitewildlife.com

Here is the CSS:

.twitter_badge {
position: absolute;
right: 0px;
}

[tomrogers123]

The demo wouldn’t load for me but my gut instinct is: do you have `position: relative` on the parent container of `.twitter_badge`? If you get the demo loading, I’ll investigate in more depth.

[Paulie_D]

Link doesn’t work for me either.

I would also say that using position:absolute is ‘generally’ something that should only be used as a last resort.

There are MUCH better ways of laying out your pages.

[nixnerd]

sorry… it’s test.elitewildlife.com

[nixnerd]

I know that the parent should be relative but I have a div inside a div inside a div inside a div. I’ve got generations of divs so to speak.

Which one should be relative? The great granddaddy?

[Paulie_D]

Ok…if you set position:absolute will take the element out of the document flow.

If you try removing both of the properties and see what happens.

.twitter_badge {
position: absolute; /* takes document of of flow */
right: 0px; /* shoves it far over to the right.
}

I guess the question is…where is it supposed to be?

Are you aware of floats and how they work….that’s probably the best way to go.

As I said…

>using position:absolute is ‘generally’ something that should only be used as a last resort.

[nixnerd]

Ok. Let me play around with floats, even though I’ve never had much luck.

I’m going to go back to basics here and see what happens. I’ll post an update when I’m through.

Sorry to wast anyone’s time.

[Paulie_D]

Not a waste…It’s just that we don’t know where the twitter bits are supposed to be.

I’m guessing that they are supposed to be under the elements on the right…right?

[nixnerd]

The twitter badge is supposed to be directly below the email form on the right.

Update: I tried to float it right and the same thing happens. It jumps out of the wrapper div.

I’ve even gone through my HTML to make sure that I’m not missing a /div close tag or something stupid like that.

Relative vs. Absolute aside, for some reason absolute positioning worked on the email form… but not the twitter badge.

I’m really at a loss for what is going on here.

[tomrogers123]

The problem is `#mail` need to be `position: relative` to set a context for the absolute positioning within. You can’t do this though because the container itself is set as absolute and so changing it would screw the whole thing up.

[tomrogers123]

It’ll take some time but try to figure something out for you.

[nixnerd]

Yeah, it’s test.elitewildlife.com. That should work. First url posted was wrong.

[wolfcry911]

can’t connect to that url either…

[tomrogers123]

Down again for me too.

[Paulie_D]

Guess it’s offline for a while.

>I’m going to go back to basics here and see what happens.

I think we’ll let this one lie for a while.

He can always post back once he’s re-evaluated.

[Author]

Posts