box-shadow + overflow:hidden

[Буллет]

Добрый день.

http://jsfiddle.net/X4kbR/2/

Подскажите пожалуйста, как сделать так, чтобы была видна тень у правого, внутреннего блока справа. При этом желательно не увеличивать ширину внешнего блока.

<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>

.main {
width:200px; overflow:hidden; height:100px;
}
.left {
    float:left; background-color:red; width:50px; height:50px;
}
.right {
    float:right; background-color:blue; width:50px; height:50px;box-shadow: 3px 3px 5px 0px ;
}

[Softlink]

Ну только такой вариант могу предложить http://jsfiddle.net/Softlink/X4kbR/26/

Или маржином подвинуть правый блок на несколько пикселей от края.

[Буллет]

Ну тогда получается, что правый блок сдвигается левее, чтобы влезла вся тень. Это не совсем то, так как в дизайне выше есть еще блок такой же ширины, и выглядит это криво.

Ну и ширину общего блока не хотелось бы увеличивать, а потом сдвигать правый блок левее, чтобы выглядело ровно.

Edited March 20, 2012 by Буллет

[Softlink]

Тогда никак. Используйте инлайн-блоки, таблицы, в крайнем случае clearfix, чтобы избежать overflow.

[Буллет]

Ясно, спасибо.

Но есть просьба, не могли бы вы показать на этом примере использование инлайн-блоков?

[Softlink]

Ясно, спасибо.

Но есть просьба, не могли бы вы показать на этом примере использование инлайн-блоков?

http://jsfiddle.net/Softlink/X4kbR/36/