Saturday, October 11, 2008

Pictures with margins

If you are looking at how to place pictures side by side text without the usage of tables in HTML, the usage of CSS is the way to go. The code is extremely simple as well. Here it is:

<style type="text/css">
.float img {
float:left;
margin-bottom:10px;
margin-right:10px;
}
</style>

Done! The key property here is float, with it specified your picture will float to the left and your text will be on the right of this text with a margin of 10 pixels bottom and right to the picture. Natutally if you need it the reverse, you have to change float to right and the margin should be specified for left instead.

No comments: