Need some help....css

[swampart]

Hi everyone,

I came on some time ago and got some suggestions about a couple of the websites i have designed. I ended up gettting books on CSS and learning as much as i could so i could "upgrade" them from table based websites to css.

I found it a bit of a mind boggle at first, but i am slowly starting go understand more and more. Although there is a lot more i still need to learn...for example why my website is doing this....

www.christinas.com.au is the web address. I have a basic page layout...
body
....wrapper div
............logo div
............nav bar div
............content div
...................text div (float left)
...................image_RHS div (float right)
.........................................img
............bottom image div
...................image 1
...................image 2
...................image 3
............footer

My main template seems to work, but as soon as i replace the image within the div "image_RHS" with another image which is not as big, or if i replace the div image_RHS with another div which i also float right, the bottom 3 images move out of their place... i am not sure why.

I tried setting the width of bottom_image div to 860px (the same width of my wrapper div) because i thought it might force the images to remain in a single line, but this hasnt fixed the problem. I also tried setting the hight of the div.

Can anyone tell me how i can fix the problem so the bottom 3 images remain at the bottom in their own line, no matter what?


Thanks a lot for your help, i will attach a photo of the problem and what i want it to look like, it is pretty obvious which is which haha

Any other comments are welcomed, as i am keen to learn.

[tZ]

#bottom-image-div {
clear: both
}

img.image1 {
float: left;
}

img.image2 {
float: right;
}

You could place the images in a unordered list then display them inline or float them to the left. Depends on your images.

[swampart]

#bottom-image-div {
clear: both
}

img.image1 {
float: left;
}

img.image2 {
float: right;
}

You could place the images in a unordered list then display them inline or float them to the left. Depends on your images.


TZ thanks very much for that, much appreciated, i will give it a go.

[CurtisS]

You could place the images in a unordered list then display them inline or float them to the left. Depends on your images.

Yes, tZ. Thanks for that! I have never thought of putting images in a list. Just goes to show that there is always something new (to me at least) to learn everyday.

[cjoe]

could you just have the image_RHS div a fixed width?