Position an image outside of its container

Question

I have a major headache trying to get an image that is contained within a div to appear to float outside of its containing element.

While I'm pretty sure this just isn't possible, I want to be sure I've exhausted all avenues before telling designer and client that they're just not going to get it to look exactly as outlined in the design spec.

The desired (specified) design looks like this. You can see that there is a globe icon that peeks above the rounded corner background of the heading. This position also has it located above the top margin of the other content blocks on the far left and right of the page (which you can also see in the partial screen shot).

The result I'm currently able to achieve looks like this. As you can see, if you try to position an image beyond its defined margins, it will 'slide under' whatever it overlaps.

I've tried absolute positioning, floating and anything else that comes to mind. I'm constrained by the margins of the <h1> element, which you can see the last few letters of in the first screen shot.

Code / CSS available on request. Big chocolate fish to whoever tells me that this actually can be achieved and how.

Code snippets: HTML

<h1>Contact Us</h1>

<div class="line">

    <div class="column col-threequarters">

        <div class="line">

            <div class="column col-threefifths contact-panel-top">

                Unrelated stuff...                    

            </div>

        </div>

        <div class="column col-last padded-sides">

            <div class="section-heading">
                <h4 class="section-heading-cap"><img src="/App_Themes/Common/images/icons/globe.gif" alt="International" />International Contacts</h4>
            </div>

            ... and so on.

CSS

.icon
{
    background: transparent none no-repeat scroll 0 -0.2em;
    padding: 1.8em 0 1em 4em;
}

.icon-globe
{
    background-image: url('images/icons/globe.gif');
}

/* **************** GRIDS ***************** */
.line, .last-column
{
    overflow: hidden;
    _overflow:visible;
    _zoom:1;
}

.column
{
    float:left;
    _zoom:1;
}

.col-fullwidth {float:none;}
.col-halfwidth {width:50%;}
.col-onethird {width:33%;}

.col-last
{
    float:none;
    _position:relative;
    _left:-3px;
    _margin-right: -3px;
    overflow: hidden;
    width:auto;
}

.padded-sides
{
    padding: 0 1em;
}

.section-heading
{
    background: transparent url('images/type/section-head.gif') no-repeat top right;
    position: relative;
    margin-left: 1.4em;
}

.section-heading-cap
{
    background: transparent url('images/type/section-head-cap.gif') no-repeat top left;
    padding: 0.4em 1em 1.6em;
    margin: 0 0 0 -1em;
}

Answer 1

How about doing relative positioning to the image?

position: relative;
top: -Xpx;
z-index: 99;

Where -X is however much it takes to get it to peek out of the DIV.

If that doesn't work I have a few other ideas, but I'd definitely like to see your HTML so I can play around with it on Firebug easily.

EDIT: The html you posted is not really enough, as the whole point of looking at the code is to be able to have a copy you can easily try stuff with on Firebug and such. I understand your hesitation/inability to post the entire page on here, however. Anyhow, I wouldn't use a <span> to show the image, I would just use an actual image. It worked fine for me.

Answer 2

using a negative top margin can sometimes work, depending on your HTML.

Answer 3

.icon
{
    margin-top:-24px; /*icon height / 2*/
}

Answer 4

The reason your image is getting cut off is because one of the parent elements is referencing the class of "col-last", which has overflow set to "hidden". Your page is telling the browser to cut-off the image.

If you can remove that overflow attribute, or modify it to "visible", it will allow the image to overflow.

If the image is STILL cutting off, because the parent element using the class "section-heading" is relatively positioned, you can set the image to have an absolute position, which will allow the image to also display that way (but I don't think that will work as long as the image has a overflow of "hidden".

Example css for the image:

.section-heading .section-heading-cap img
{
    position:absolute;
    bottom:0px;
    left:0px;
}

However, if you do that, the text will position itself under the image. You would have to set the padding or margin on the left side of the h4 tag appropriately to push it back out into view again.