Having elements upon other elements - html

Question

So I have a header and I'm not really sure how I should code the three element boxes that should be slightly below it, but still on the end of it, like the picture below:
One way, is perhaps position absolute and margin-top, or should I perhaps slice the images, so the top of the boxes is a picture with the header background...
.box {
position: absolute;
margin-top: -30px;
}
Or how should I do it?

Answer 1

Next time you should post some code of what you've tried. Against my better judgement, I made exactly what you drew.
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;
}