SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Negative margins and float overlapping

    Hi!

    I have a floated element followed by an element using negative margins.

    Is it possible to have the negative margins overlap the floated one?

    Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

    Why does the background move but not the content?

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You could make the lower element overlap with:

    Code:
    .bottom{
        height:50px;
        width:150px;
        background-color:green;
        top:-40px;
        position:relative; 
        z-index: 10;
    }
    I've changed margin-top to top (thanks to position:relative). Previously, the text was snagging on the floated box.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.

    Well, that does work but it leaves an empty space since the element still occupies its original position. It could become a problem as the real situation I have to apply this too has a large element to move.

    Guess I'll have to find another way

    Floating it would work but I need it centered.

    Oh, well...

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    There are lots of ways to skin a cat, and I'm not the most inventive CSSer around here. Perhaps indicate to us exactly what kind of layout you need, and we can suggest the best way to go about it. The current example is a bit theoretical.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Apply the negative margin to the bottom of the float and it will drag the element underneath upwards.

    Code:
    .topleft, .topright {
        float:left;
        height:300px;
        background-color:red;
        width:150px;
        overflow:auto;
        margin-bottom:-40px;
    }
    .top {
        padding-left:30px;
    }
    .top:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .bottom {
        height:50px;
        width:150px;
        background-color:green;
        position:relative;
    }
    Add position:relative to .bottom if you want the element in front.

    You can't use a negative top margin on elements under a float because the margins slide under the float until they reach the containing block. This drags the background upwards but of course the content must still clear the float and stays where it was.

    Margins, backgrounds and borders will always slide under the float until they reach the containing block but the foreground content (text and images) will still be repelled by the float..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •