Topic: Complicated floating problem - bottom right?? (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=25324" title="Pages that link to Topic: Complicated floating problem - bottom right?? (Page 1 of 1)" rel="nofollow" >Topic: Complicated floating problem - bottom right?? <span class="small">(Page 1 of 1)</span>\

 
estelle
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Mar 2005

posted posted 03-24-2005 10:32

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

code:
.          ____________
| | 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)

Blaise
Bipolar (III) Inmate

From: London
Insane since: Jun 2003

posted posted 03-24-2005 11:47

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.

estelle
Obsessive-Compulsive (I) Inmate

From:
Insane since: Mar 2005

posted posted 03-24-2005 12:23

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.

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 03-24-2005 12:49

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]

Blaise
Bipolar (III) Inmate

From: London
Insane since: Jun 2003

posted posted 03-24-2005 15:24

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,

estelle
Obsessive-Compulsive (I) Inmate

From:
Insane since: Mar 2005

posted posted 03-25-2005 08:55

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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu