View Full Version : Floating Images differently

Jan 22nd, 2009, 07:31 PM
Hi there,
I will have more than one image on my page that I will need to format. As all my image tags start with img anything I place in the css affects ALL my images. How can I apply different formatting to different images/sections of my webpage? I want some images to float right and some float left.

How will the html and the css code look?


Jan 22nd, 2009, 07:34 PM
Wrap the images in a div with an ID and target the block of images, or give them classes according to the direction you want them floated to.

Jan 22nd, 2009, 07:57 PM
Hell htims,

A left floated img and then a right floated img... styled with classes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.left {
float: left;
float: right;
<img src="path/to/image.jpg" alt="description" width="200" height="150" class="left" />
<img src="path/to/image.jpg" alt="description" width="200" height="150" class="right" />

Jan 22nd, 2009, 09:44 PM
Expanding on that a little, let's say you have a left and a right (or two lefts will do the same thing often) floated div:

#divLeft {float:left;}
#divRight {float:right;}

And let's say you want the images in divLeft to have a border and the ones in divRight to have none and you want all the rest to have a 10px border.
#divLeft img {border-width:2px;}
#divRight img {border-width:0;}
img {border-width:10px;}

So this says if an img is in the divLeft then apply a rule, if it is in divRight apply a different rule and if it is anywhere else, a third rule.

Jan 22nd, 2009, 10:29 PM
Great thanks Gerry for the further explanation!!