Наложение изображений с определенной шириной

Question

Я пытаюсь наложить несколько изображений друг на друга в пределах области, установленной на определенной ширине. Моя проблема заключается в том, что когда объединенная ширина этих изображений превышает ширину области, некоторые изображения помещаются в строку ниже. Я попытался исправить это, используя left:-100px, чтобы изображения перекрывали друг друга и уменьшали общую ширину комбинированного изображения, но та же проблема все еще возникает.

Я знаю, что решение может быть boxC{top:-100px;}, но это означает, что в окне создается дополнительный 100px. Как подтверждение этого, вы можете свести к минимуму вертикальную высоту браузера, и вы увидите, что есть невидимый пробел. http://postimage.org/image/5s0o82f81/

Вопрос: как я смогу накладывать несколько изображений друг на друга в пределах определенной ширины без каких-либо изображений, размещенных на приведенной ниже строке.

То, что я в настоящее время: http://jsfiddle.net/xFkh6/2/

Что я хочу:.. http://jsfiddle.net/d9xh8/2/ (обратите внимание, что для достижения этой цели я должен был установить #wrapper{width:600px} Я хочу, чтобы достигнуть этого взгляда, оставляя его как #wrapper{width:500px} так же, как и в предыдущем jsFiddle

HTML:

<div id="wrapper"> 
    <div id="boxA" class="box"></div> 
    <div id="boxB" class="box"></div> 
    <div id="boxC" class="box"></div> 
</div> 

CSS:

#wrapper { border:black 5px solid; width:500px; height:100px; margin:0 auto;} 
.box { float:left; position:relative; top:0;} 
#boxA {width:200px; height:100px; background:rgba(250,100,100,0.6); left:0px; } 
#boxB {width:200px; height:100px; background:rgba(150,140,200,0.6); left:-50px;} 
#boxC {width:200px; height:100px; background:rgba(100,250,250,0.6); left:-100px; top:-100px;} 

Answer 1

Вместо левого и верхнего края использования, как это,

<style> 
#wrapper { border:black 5px solid; width:500px; height:400px; margin:0 auto;} 
#wrapper div { float:left;position:relative;} 
#boxA {width:200px; height:100px; background:rgba(150,20,0,0.6); margin:0 0 0 0} 
#boxB {width:200px; height:100px; background:rgba(150,40,100,0.6); margin:50px 0 0 -50px;} 
#boxC {width:200px; height:100px; background:rgba(150,60,200,0.6); margin:100px 0 0 -50px;} ​ 
</style> 
<div id="wrapper"> 
    <div id="boxA" class="box"></div> 
    <div id="boxB" class="box"></div> 
    <div id="boxC" class="box"></div> 
</div>​