Float Images with CSS


Of course, any website would be boring without images to break up a lots of text. Using the Float command that you saw earlier, it is possible to float images within text paragraphs.


  For the demonstration Right Click on this image and Save As 'ie.jpg'


  and Right Click on this image and Save As 'firefox.jpg'


Create a new CSS document with your text editor and save it as 'demo.css'. Also, create a new HTML document with your text eitor and save it as 'demo.html'. Add the following to the relevant document:




body {

background-color: #ffffff;

font-size:100%;

}

p {

font:1em verdana,garamond,arial,sans-serif;

}

#content{

float: left;

background-color:#f7e8aa;

width: 400px;

}

img.right{

float:right;

}

img.left{

float:left;

}





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>My First Web Page Using CSS</title>

<link rel="stylesheet" type="text/css" href="tutorial_j.css" />

</head>

<body>

<div id="content">

<p><img class="right" src="firefox.jpg"> This is a lot of text to fill in the box so that a floating image demonstration can happen. The Intenet Exporer icons have been floated to the left and placed in difefent positions within the paragraph. <img class="left" src="ie.jpg">The Firefox icons have been floated to the right and placed in difefent positions within the paragraph. </p>

<p><img class="left" src="ie.jpg">This is a lot of text to fill in the box so that a floating image demonstration can happen. The Intenet Exporer icons have been floated to the left and placed in different positions within the paragraph. <img class="right" src="firefox.jpg">The Firefox icons have been floated to the right and placed in different positions within the paragraph. </p>

</div>

</body>

</html>




Have a look at the Example.


The Internet Exporer icons have been floated to the left and placed in different positions within the paragraphs. The Firefox icons have been floated to the right and placed in different positions within the paragraphs. Notice how the text is right up to the images. We can tweak this by adding some CSS to create a border around the images. Add the red code below to demo.css and don't forget to Save then Refresh as usual.




img.right{

float:right;

}

img.left{

float:left;

}

img{

border:6px solid #f7e8aa;

}




Have a look at the Example. Because the images have a white area around them, our webpage would look smarter if it had a white backgound too. Therefore, in the CSS, if we change the body and #content colours to white (#fffff), the demonstration will look like this Example.