Chrome and Firefox render positioned layout with negative margin differently - how to prevent?

Tags: css,layout,css-float,clearfix

Problem :

I have a very specific layout to achieve with HTML/CSS. Basically I have a text container with a couple of left-floated boxes within. I then have a footer which needs to overlap this text container by a few pixels at the bottom. I'm achieving this by using a negative top margin on the footer, and setting position:relative and z-index on the text container and footer to make the footer layer stack above the text container.

It can be best demonstrated in a fiddle:

The issue is that in IE9 and Firefox 18 the content of the footer clears the content of the text boxes, whereas in Chrome the content of the footer overlays the content of the text boxes without any clearing.

I basically need this to be consistent in IE7+, Firefox and Chrome, one way or the other. Not bothered which way - it can either clear or overlap, but it needs to behave the same regardless of browser.

Can anyone see why it's doing this and how to rectify it? It may be to do with the micro clear fix I'm using on the text container, but I'm really not sure.

Thanks for any pointers folks - this one has me stumped!

Solution :

Sorted. I couldn't overcome the issue with the current mark-up but by removing the negative top position and adding an absolutely positioned div inside the footer with a negative top value (top: -20px;) that has achieved what I'm looking for. See:

    CSS Howto..

    How can I highlight position in nav bar for single-page website?

    How to change a span to look like a pre with CSS?

    How to have an unlimited amount of divs shown next to each other

    How to make css notifications without jQuery? [closed]

    CSS Menu - how to [closed]

    Rails - how to build a grid-like list of product page

    how do I override user agent — using buttons from angularjs

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How can I divide the screen to these divs in css?

    How to get an ellipsis to display on text in CSS

    How can i apply background-image to low div

    Hide/Show Load function now working

    How to override external css marked as !important? [closed]

    How to make a web form with 3 columns?

    Android - How do I create an email body from a file that contains css and html?

    How to horizontally center a header that is position:absolute

    CSS Sprites - How to Align-bottom all Sprite Buttons

    How to center div while keeping inside divs on same line in css?

    How to disable inline CSS position attribute

    How to blur background img - css?

    Getting CSS3 to show up in child elements when used on parent element

    how to scale an image disproportionally via css?

    How to completely remove borders from HTML table

    How to write persistent CSS box rules?

    How to achieve following style for horizontal rule with css

    How to make visual changes with dynamically generated HTML code?

    How do I make a class/div behave like it were floating?

    how to hover after calling jquery animate()

    How to call a javascript function with a css button? [closed]

    How to change color and background of whole web site