Floating several images

[kimlb]

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">
Text
<div class="columnleftt"><img src=... />
Text
<div class="columnright"><img src=... />
Text
</div>

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.

Thanks,
Kim.

[ronaldb66]

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:

CSS:

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

and

HTML:

<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>
  ...
</div>

Since the images are classed, there's no problem whatsoever to have any number of images using these classes.

[kimlb]

Perfect, exactly what I was looking for. Although it does the same as I outlined above, it is much tidier. Thanks Ronaldb66.

Kim.