How to create colored boxes with image or text inside

Here's another one of my favorites--colored boxes, which I use all the time when making something stand out in a post or on my sidebar. I usually use this code to feature the book summaries or synopsis of my book reviews on WSP.

Yay for colored boxes!

Here's the code for a simple colored box with text inside.

<div style="background-color: #FFF8C6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">
</a><b>This is a colored box</b><br/>
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.
</div>

This is how it looks:

This is a colored box.
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.

To change the color of the background, simply edit background-color (red text). You can refer to this page for HTML color codes and names.

You can adjust the padding (blue text) according to your preference. Padding refers to how near/far you want your text to be from the edges of the box. For example, a 20px padding will make it look like this:

This is a colored box.
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.

If you want the box to be as wide as your post, simple remove the margin codes: margin-left: 20px; margin-right: 20px; or if you just want to adjust the margins, just edit the measurements (pink text).

If you remove the margin codes, it will look like this:

This is a colored box.
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.

To edit the text alignment, you can just use the alignment tool.

Here's how the code looks if you have an image inside.

For me, the easiest way to do it is to just insert an image using the Insert Image icon on the toolbar and then just copy the HTML code for the image and insert it inside the code for the colored box.

See where I inserted the code for the image?

<div style="background-color: #FFF8C6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">

<a href="YOUR IMAGE URL" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="100"/></a>

<b>This is a colored box</b><br/>
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.
</div>

I have my image aligned to the left, so it will look something like this:

This is a colored box
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.

If you want your image to go outside the colored box, simply insert the code for the image before the code for the colored box and add a couple of line break tags (green text) to bring the colored box lower.

<a href="YOUR IMAGE URL" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="100"/></a><br/><br/>
<div style="background-color: #FFF8C6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">
<b>This is a colored box</b><br/>
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.
</div>

It will look something like this:

This is a colored box
This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go. This is where your text will go.

Keep adding a line break tag if needed to get the format you want.

Experiment with the margins, padding, with line breaks, and with your image size to get the look you want. :)