Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Why is this div jumping outside the wrapper?

  • This topic is empty.
Viewing 7 posts - 16 through 22 (of 22 total)
  • Author
    Posts
  • #125151
    nixnerd
    Participant

    Ok guys,
    This is driving me nuts. I’ve been researching this for hours and can’t figure it out.

    [Click here](http://test.elitewildlife.com/ “Test Website”)

    The test site should be back up. You will see that my twitter badge is not directly under the mail form like it should be… it’s to the right. When I float other divs, they work perfectly fine.

    Here is the CSS controlling all this:

    .twitter_badge {
    float: right;
    margin-top: 10px;

    }

    #bird_box {
    width: 80px;
    height: 80px;
    background: url(twitter_noise.png);
    position: absolute;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    outline: 1px dashed #00CCCC;
    outline-offset: -5px;

    }

    #caged_bird {
    position: absolute;
    top:4px;
    left: 6px;
    shadow: 0px 1px 2px #33CCCC;
    }

    #talk_bubble {
    width: 345px;
    height: 80px;
    background: url(twitter_noise.png);
    position: absolute;
    margin-left: 90px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    outline: 1px dashed #00CCCC;
    outline-offset: -5px;

    }

    #tweet {
    position: absolute;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    font-family: league_gothic;
    text-align: justify;
    color: #006363;
    text-shadow: 0px 1px 2px #33CCCC;
    font-size: 20px;
    }

    If someone could please solve this… it would make my month.

    #125152
    wolfcry911
    Participant

    a quick fix:
    remove the float and add position: absolute; and right: 0; to .twitter_badge
    then remove position: absolute from #talk_bubble and #bird_box, and add float: left to #bird_box

    That will solve the problem, but I’d stronger recommend redoing the entire layout

    #125156
    nixnerd
    Participant

    What do you mean when you say:

    > but I’d stronger recommend redoing the entire layout

    ?

    #125163
    Paulie_D
    Member

    Because using absolute positioning should IMO be reserved for specific effects not general layout and, as I said, should be your last option…not your default.

    Floats is the way to go here. You just need to get your head around how they work and how to overcome their minor quirks.

    As you have discovered, maintaining and adding to a site built using AP is a complete minefield.

    #125164
    Rohit_css
    Member

    .twitter_badge {
    float: none;
    margin-left: 525px;
    margin-top: 10px;
    }try this it worked…!!!

    #125167
    Bipin Kumar Pal
    Participant

    Hi
    this some css add #bird_box{float:left; position: relative;} and
    this id add #talk_bubble{ position: relative;}

    this is right way;

    #134243
    nixnerd
    Participant

    Thanks all!!!

Viewing 7 posts - 16 through 22 (of 22 total)
  • The forum ‘CSS’ is closed to new topics and replies.