Html – Position an image outside of its container

csshtmlimage

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

    .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;
    }
 <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.

Best Solution

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.

Related Question