Grow your CSS skills. Land your dream job.

Why is this div jumping outside the wrapper?

  • NIX
    # February 18, 2013 at 10:07 am

    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;
    }

    # February 18, 2013 at 10:15 am

    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.

    # February 18, 2013 at 10:18 am

    Make sure the parent element or containing div has position: relative on it. Chris, of course, has a helpful screencast over some of the issues you can run into with positioning [here](http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/ “Positioning”).

    # February 18, 2013 at 10:24 am

    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.

    NIX
    # February 18, 2013 at 10:29 am

    sorry… it’s test.elitewildlife.com

    NIX
    # February 18, 2013 at 10:34 am

    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?

    # February 18, 2013 at 10:38 am

    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.

    NIX
    # February 18, 2013 at 10:43 am

    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.

    # February 18, 2013 at 10:47 am

    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?

    NIX
    # February 18, 2013 at 11:19 am

    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.

    # February 18, 2013 at 11:21 am

    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.

    # February 18, 2013 at 11:35 am

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

    NIX
    # February 18, 2013 at 11:37 am

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

    # February 18, 2013 at 11:55 am

    can’t connect to that url either…

    # February 18, 2013 at 11:58 am

    Down again for me too.

Viewing 15 posts - 1 through 15 (of 23 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".