Имея элементы на других элементах

Question

Итак, у меня есть заголовок, и я не уверен, как я должен закодировать три элементарных блока, которые должны быть немного ниже него, но все же на конце его, как на картинке ниже:

Один из способов, это возможно позиции абсолютные и запас-топ, или я должен, возможно, нарезать изображения, поэтому в верхней части коробки представляет собой изображение с фоном заголовка ...

.box { 
    position: absolute; 
    margin-top: -30px; 
} 

Или как мне это сделать?

Answer 1

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

http://jsfiddle.net/xD69h/

HTML:

<div id="a"> 
<span id="a-text">A</span> 
<div id="b"> 
    <span id="b-text">B</span> 
</div> 
<div id="c"> 
    <span id="c-text">C</span> 
</div> 
</div> 

CSS:

#a { 
width: 100%; 
height: 150px; 
background-color: #EFE4B0; 
border: 3px solid #FFABCA; 
color: #B97A57; 
} 
#a-text { 
float: left; 
} 
#b { 
width: 200px; 
height: 150px; 
background-color: #7092BE; 
border: 4px solid black; 
border-radius: 5px; 
color: #B97A57; 
float: left; 
margin-top: 50px; 
margin-left: 50px; 
} 
#c { 
width: 200px; 
height: 150px; 
background-color: #B97A57; 
border: 4px solid #B97A57; 
color: white; 
float: left; 
margin-top: 50px; 
}