SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  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,212
    Mentioned
    456 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.

  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,212
    Mentioned
    456 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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 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
  •