View Full Version : Floating several images

03-08-2005, 08:20 AM
I'm bugging myself with the following:

I have a column on a page, which contains a lot of text and a number of pictures. For the pictures, I want some of them to float left and some to float right.

I have no problems assigning the float property to the img element in the column, but this is very general, and I have to float either to the left or the right. I've also considered using IDs, but using an ID is only allowed once on a page, if I understand it right.

How can I CSS some code where I specify e.g. img a {... float: left ...} and img b {... float: right ...}. I've found that if I box an image, the text won't float below it.

I've actually been able to do this, by using CSS:
column {...}
columnimgleft img {float: left}
columnimgright img {float: right}

and HTML:
<div class="column">
<div class="columnleftt"><img src=... />
<div class="columnright"><img src=... />

but I have the feeling there might be some easier way to achieve this. If not, then fine, but if so, I'd like to know if anybody could help.


03-08-2005, 10:06 AM
There's no need to wrap the images in boxes; you can simply float them by themselves. If you need to float a number of images either left or right, you can set up two classed rules and assign the appropriate class to the images directly.

A simple example using your "column" div:


.column {...}
.picleft {float: left;}
.picright {float: right;}


<div class="column">
<img src="..." class="picleft">
<p>Some text wrapping around the left floated image.</p>
<img src="..." class="picright">
<p>Some other text wrapping around the right floated image.</p>
Since the images are classed, there's no problem whatsoever to have any number of images using these classes.

03-09-2005, 06:51 AM
Perfect, exactly what I was looking for. Although it does the same as I outlined above, it is much tidier. Thanks Ronaldb66.