ah ha
well start with a div and set its class to something useful that we can use to reference the box in the CSS code.
Code:
<div class="bluebox">
</div>
wherever your CSS is, add a rule for our blue box, make the bg lightblue (or whatever) and maybe specify a size...
Code:
div.bluebox {
background: lightblue;
width: 260px;
}
now add the box heading, assuming you've got 2 levels of heading in the page already, add a third level heading...
Code:
<div class="bluebox">
<h3></h3>
</div>
you can reference the heading with a new rule in your CSS (and also make it whatever colour you want)...
Code:
div.bluebox {
background: lightblue;
width: 300px;
height: 200px;
}
div.blue_box h3 {
background: blue;
margin: 0px;
padding: 5px;
text-align: center;
}
Now you can add <p> paragraphs for the next boxes, give one (I've done the white one) a class so you can provide different CSS to <p>'s that have that class.
Here's the whole lot hope it's the sort of thing you were after:
Code:
<html>
<head>
<style>
div.blue_box { /* Our blue boxes */
background: lightblue;
width: 260px;
}
div.blue_box h3 { /* level 3 headings inside our blue boxes */
background: blue;
margin: 0px;
padding: 5px;
text-align: center;
}
div.blue_box p.white_box { /* the white box pragraph in our blue boxes */
background: white;
margin: 5px;
padding: 5px;
text-align: left;
}
div.blue_box p { /* ordinary paragraphs in our blue boxes */
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<div class="blue_box">
<h3>Box Title or image</h3>
<p class="white_box">
white box content here with links and whatever
</p>
<p>Have one to sell? [Image]</p>
</div>
</body>
</html>