Creating a Media-Box

Hi everyone,

I thought I share the following with you because  quite often people try to make a box with a picture in it and some extra text to the right but do it wrong. I call this box a mediabox. This is done by all big websites like facebook, amazon google, and pretty much any website that aims at people that read from left to right do.

For some reason people keep using tables for this kind of job, which brings in extra complexity and mark-up code while it can be done in a much easier and cleaner way.

Now if you would have read my article on monkey book which I still recommend you do, you would probably know how to do this without using tables. In fact the mark up is pretty much the same except for the extra float on the image.

General mark-up:
Code:

<div class="media-box">

<img src="http://i55.tinypic.com/2d962ww.png" alt="" />

<strong>This is a title</strong>

<p>this is some text, lalalala lalalala lalalala lalalalala lalalala</p>

</div>

We used a class of media-box, since it's pretty likely that we are going to use the style for that div and it's inner elements more than ones. For instance if we have a catalogue with products.

Just some thing we should arrange for this div. we need to let it float left, so we can show more or less  of these boxes depending on the window size or wrapping container. maybe a nice background color and maybe even some padding so the contents have some air. We could set a fixed height and width.

We also need to set the image to float: left; so the shows up nicely at the right side of it. And we should apply some margin to the right of the image to keeps some space between the text and the image.

The style could look like this:
Code:

            div.media-box{

                float:left;

                margin-right:10px;

                overflow: hidden;

                background:#0055BB;

                padding:3px;

                border:1px solid #fff;

                color:#fff;

            }

            .media-box img{

                float:left;

                margin-right:5px;

            }

An example can be found here here
And the complete script I used here. (note though: use an external style sheet on a live site! this is why)

Rests me to wish you happy coding! Leave a comment if you found it useful, have questions or have requests.

Cssfreakie