Moronacity Tech Journal » CSS, Featured
Floating Images with CSS
By Diane Ursu
No web page is complete without images, even if they serve no greater purpose than aestheticism. They are a necessary element because that is what people want to see. Words are great – anyone will tell you that “content is king” – but images make paragraph perusing less daunting.
No image formatting will simply place an image inline with text.
Image wrap allows the words to wrap around the image, including it in the paragraph.
Image Float Left and Float Right
Floating images is quite simple, and can be done in one of two ways. The first method defines how the image is to be displayed by including the code directly in the web page. This is done by using a <div> tag.
Image Margins
The above examples nicely float the image so the words wrap around it, but it isn’t exactly pretty, especially since the words practically touch the picture. Ideally, there would be some space between the words and the image. This can be done by designating margins within the <img> tag.
This can sometimes be hard to remember and can become tedious if you use a lot of images, or you intend to create a lot of webpages. To include this information in every <img> tag would defeat the purpose of using a style sheet.
The second and best option is to define the image align information in the style sheet. Each alignment would have its own name. In our example, we will call the left-align property “alignleft,” and the right-align property “alignright.” They would be included in the style sheet as such:
The margin defines how much space there will be on each side of the image. In the example, there will be 5px on each side, except for the side where the words will be. On this side, there will be 20px.
Notice how the margin tag does not indicate which is top, bottom, right, or left. These values default according to their order: top, right, bottom, left. Think of the positions as going in a clockwise direction, starting at midnight.
In the above CSS example, the margin for img.alignleft is margin:5px 20px 5px 5px. Automatically, the following are assumed:
Essentially, by defining within the style sheet “img.alignleft,” we are defining an image “class,” the tag that is to be used when designating how the image is to be displayed. The classes that we defined in the above example are “alignleft” and “alignright.” To float the image to the left, the <img> tag in the web page file would look like this:
Let’s insert an image into the HTML file for the web page. It will float left with the text on the right. The HTML would look like this:
The web page would look like this:
Previous: CSS Paragraph and Div Tags
No image formatting will simply place an image inline with text.Image wrap allows the words to wrap around the image, including it in the paragraph.
Image Float Left and Float Right
Floating images is quite simple, and can be done in one of two ways. The first method defines how the image is to be displayed by including the code directly in the web page. This is done by using a <div> tag.
<img style="float:left" src="/imagesmall.jpg" />This text wraps around the
image, which is placed on the left side of the page.
<img style="float:right" src="/imagesmall.jpg" />This text wraps around the
image, which is placed on the right side of the page.Image Margins
The above examples nicely float the image so the words wrap around it, but it isn’t exactly pretty, especially since the words practically touch the picture. Ideally, there would be some space between the words and the image. This can be done by designating margins within the <img> tag.
<img style="float: left; margin: 5px 20px 5px 5px;" src="" />This text wraps
around the image, which is placed on the left side of the page.This can sometimes be hard to remember and can become tedious if you use a lot of images, or you intend to create a lot of webpages. To include this information in every <img> tag would defeat the purpose of using a style sheet.
The second and best option is to define the image align information in the style sheet. Each alignment would have its own name. In our example, we will call the left-align property “alignleft,” and the right-align property “alignright.” They would be included in the style sheet as such:
img.alignleft
{
float:left;
margin:5px 20px 5px 5px;
}
img.alignright
{
float:right;
margin:5px 5px 5px 20px;
}The margin defines how much space there will be on each side of the image. In the example, there will be 5px on each side, except for the side where the words will be. On this side, there will be 20px.
Notice how the margin tag does not indicate which is top, bottom, right, or left. These values default according to their order: top, right, bottom, left. Think of the positions as going in a clockwise direction, starting at midnight.
In the above CSS example, the margin for img.alignleft is margin:5px 20px 5px 5px. Automatically, the following are assumed:
- The top margin is 5px.
- The right margin is 20px.
- The bottom margin is 5px.
- The left margin is 5px.
- The top margin is 5px.
- The right margin is 5px.
- The bottom margin is 5px.
- The left margin is 20px.
Essentially, by defining within the style sheet “img.alignleft,” we are defining an image “class,” the tag that is to be used when designating how the image is to be displayed. The classes that we defined in the above example are “alignleft” and “alignright.” To float the image to the left, the <img> tag in the web page file would look like this:
<img class="alignleft" src="/imagesmall.jpg" />Let’s insert an image into the HTML file for the web page. It will float left with the text on the right. The HTML would look like this:
<html>
<head>
<title>My Sample Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h1>My Sample Page</h1>
<img class="alignleft" src="/imagesmall.jpg" />
<p>The code for this web page is much easier to write, read, and edit because it is not cluttered with tags that designate the color and size of the words and pictures. If you make 100 web pages, you can change the look of all of them simply by changing the style sheet.</p>
<p>While you may not know how to create CSS code from scratch until you have had a lot of practice, learning how to recognize CSS elements and understanding how to manipulate them will make it much easier for you to customize CSS templates, like those used for WordPress and other blogging software.</p>
<div class="footer">Copyright © 2011 Moronacity.com.</div>
</body>
</html>The web page would look like this:
Previous: CSS Paragraph and Div Tags
