Topic: Complicated floating problem - bottom right??

Heya, can anyone explain how to perhaps use floats to produce the following layout? I think i chose a really hard design because i haven't been able to find any examples of how to do it in CSS. HTML tables would be easy, but apparently tables are a hacky way of doing things in comparison to CSS...

The closest thing i could find to a solution was an asylum post made by Allura and responded to by MajorFracas etc (http://www.ozoneasylum.com/11041), but the images are no longer available so its hard to understand what they're talking about.

* I want two columns, both fixed width, centered on the page (even space either side).
* The left column contains a fairly large image, aligned to the right side of the column.
* The right column contains (left aligned) text at the top of the column, and then contains images aligned at the bottom right hand corner of this column.

Like this....

.          ____________

         |            |  Text here left          |<- window edge

         |            |  aligned...              |

         |            |  ...                     |

         |            |                          |

         |            |                          |

         |            |         _  _  _          |

         |____________|        |_||_||_|         |







.

I.e. the top of the big image lines up with the top of the text, the bottom of the big image lines up with the bottom of the small images, and the right edge of the text lines up with the right side of the last small image.

Note that the text will never be too long to go past the height of the big image.

Thanks! Estelle.

(Edited by estelle on 03-24-2005 10:33)

(Edited by estelle on 03-24-2005 10:34)

(Edited by estelle on 03-24-2005 10:35)

(Edited by estelle on 03-24-2005 10:35)

How many images do you want to be n the right hand column, could you use a background image for that column instead? you could make sure that no text flows over teh BG image by applying padding.

Good idea, but it wouldn't work for what i want. I wanted the smaller images to be thumbnails for different images, and the thumbnails would be different on each page.

The hard thing is making the small images go to the bottom, keeping in mind that the large picture will be different sizes on different pages, so i don't want to use any absolute positioning.

Hello and welcome in the Asylum

[quick_idea] If your page is a sort of photo gallery, you could place the big image in the middle of a span having a kind of background color/image, to make sure it always takes the same size and provide a polaroid border around the photos for example. [/quick_idea]

hmm, well I'm not entirely sure I understand your design, perhaps you could post up a link to your test site, if you don't have any spare space online you can use Geocities, they provide you with enough space fora test site and it's useful when asking for help so that people can check your code and offer suggestions.

Cheers,

Finally got it figured out with help from various peoples. Thanks for your ideas guys!

If you wanna see the various attempts and final result, checkout http://www.jezari.com

Thanks again

Estelle xxx