2 replies [Last post]
Robin
Robin's picture
Offline
newbie
Last seen: 18 years 6 weeks ago
Joined: 2004-05-29
Posts: 2
Points: 0

Hi. I'm trying to reimplement phyllistuckwellhospice.org/index.html with a CSS layout, and I've come across a sticking point. The section of the page that starts with NEW! and ends with a photo of a strawberry I've got set to a div with float:right (#right). My problem is that I want the text in the container to the left (The Phyllis Tuckwell Hospice provides free...) to never wrap around the bottom of the floated div regardless of how much content said div contains. I've tried setting #right to have height:100% and min-height:100% but that doesn't seem to do anything.

An alternative solution would be to take #right out of the main div and have a standard 3 column arrangement but then I'd have to do interesting things like cutting the main logo up. Is there any obvious answer that I'm missing?

TIA

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 18 years 7 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

height, min-height confusion

Well, I would say ditch the floats. There's no need for it on your layout . The only time I would suggest floated columns is if you have a full-width footer, which you don't.

I would use position:absolute; on all three columns.

You can use floats to achieve it, but it will bring in various problems with IE bugs (3px bug most likely) and the like, so it's best to avoid them unless you really need them IMHO.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

Robin
Robin's picture
Offline
newbie
Last seen: 18 years 6 weeks ago
Joined: 2004-05-29
Posts: 2
Points: 0

height, min-height confusion

OK, absolute it is. Thanks Smile