How can i put part of a div inserted in a div outside?

I have 3 divs like this image:

Two of those divs 开发者_运维技巧have the same width and height and the last one (red div) should go outside but not all, only a part (10%) I tried margin-left: -10px; but it didn't work.

Thanks.

You appear to have set overflow: hidden on one of the outer divs. That’s why the inner div is clipped when you apply the negative margin.

Try using absolute positioning and assigning a z-index.

Please do not use absolute positioning when your problem does not require it.

Negative margin should be enough: http://jsfiddle.net/pmc7B/1/

Give the parent <div> relative position:

<div style="position: relative;">

Then give the red <div> negative left value:

<div style="position: absolute; left: -20px;">

I think I see what your trying to do. Have you considered giving the red div a Z index of +1 so it float over the others and acts independantly of them