Negative margins and float overlapping

HTML & CSS
1

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

You could make the lower element overlap with:

.bottom{
    height:50px;
    width:150px;
    background-color:green;
    [COLOR="Red"]top:-40px;
    position:relative; 
    z-index: 10;[/COLOR]
}

I’ve changed margin-top to top (thanks to position:relative). Previously, the text was snagging on the floated box.

3

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 :smiley:

Floating it would work but I need it centered.

Oh, well… (:

4

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

Apply the negative margin to the bottom of the float and it will drag the element underneath upwards.


.topleft, .topright {
    float:left;
    height:300px;
    background-color:red;
    width:150px;
    overflow:auto;
  [B]  margin-bottom:-40px;[/B]
}
.top {
    padding-left:30px;
}
.top:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.bottom {
    height:50px;
    width:150px;
    background-color:green;
  [B]  position:relative;[/B]
}

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…