...

View Full Version : Floating several images



kimlb
03-08-2005, 09: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">
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
03-08-2005, 11: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:

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
03-09-2005, 07:51 AM
Perfect, exactly what I was looking for. Although it does the same as I outlined above, it is much tidier. Thanks Ronaldb66.

Kim.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum