Adding images the cool way
February 11, 2008 – 9:45 pm
Images can add a lot to any content. No surprise there right? The question though is how to get that image to integrate well into your content. If you just add an image to your content as is, it will take up a whole ‘line’ of space, leaving lots of whitespace that not only looks wrong, but takes away valuable content space. The trick is to float it. Literally.
If you look at the image to the right of this paragraph you will how the effect. This text wraps around the image and it flows nicely. So, how do you accomplish this? The answer it turns out is actually quite easy, CSS or Cascading Style Sheets.
In this case I’m going to show you the inline method of CSS. There are a couple of ways to accomplish this. Every HTML tag supports the style attribute (see my previous tutorial). The style attribute is where you place in-line style information. In this case it is a simple process. In this case the style attribute will have two styles applied. The float and the margin.
Float Style
The float style does pretty much what it says, it floats the element. You can either float left or right and the style looks like:
style="float: right;"
That takes care of the actual floating. However, when you just apply a float, the content that is floating around it will go right against the image if possible. That just looks wrong. So the next step is to apply some margins.
Margin Style
Again, the margin style does exactly what it says, applies a margin to the element. You can either do margins on a per side basis or all four sides at once. The way to do this is like:
style="margin-left: 10px" or style="margin-right: 10px"
The all in one approach looks like:
style="margin: 5px 10px 5px 10px"
The four attributes are applied in a clockwise manner starting with the top, so in this example there will be a top margin of 5 pixels, right margin of 10 pixels, bottom margin of 5 pixels and a left margin of 10 pixels.
Putting it together
Now that we know how to float an image and add a margin, we can put the two together like this:
style="float: left;margin: 0 0 10px 10px"
Notice that they two styles are separated by a semi-colon. Add that to your image and presto, a float image with a nice margin.
In our next tutorial we’ll go over style sheets in general and the most common tasks you will want to accomplish. Stay tuned!
