View Full Version : flash + liquid layouts + 100% + Chrome & IE = AAAAGH!

03-19-2010, 08:57 AM
At the bottom of my page i have a div, called bottom. And in that div I have 2 more divs, one floated right, the other non floated but on it's left.

In the div on the right, rsbox, I have an <li> with a load of links, these are my product gallery titles. In the div on the left of that is my gallery, with a horizontal scrolling flash image player.

The gallery div is set to 73% of the page, but the flash item within is set to 100%. This way it fits nicely on any screen size.

Now this works fine for Mac Safari & Firefox, and for PC Firefox, but for PC Chrome and PC IE the flash item appears below where it should and occupies 100% of the container.

How the flip can I fix this?

Thanks for reading

03-19-2010, 07:21 PM
Can you provide a link?

03-19-2010, 07:24 PM

It only doesn't work in PC IE and Chrome

03-19-2010, 08:04 PM
My quick guess is that the combination of the auto left and right margins and the right padding in your #gallery style is causing the gallery div and it's contents to be pushed below the rsbox div (which you floated right.

I think you should try deleting the right padding and the left and right margins from #gallery (they shouldn't be necessary anyway).

03-19-2010, 10:00 PM
yes, it's to do with the way the browsers handle the margin and padding. the nice ones fit within the div it's within, the naughty ones pad away from the div it's next to.

I used the auto margin to make it sit within the centre of the page for any page size and the right padding to allow the rsbox space to display.

If I delete the auto margins, how can I get the gallery to sit right no matter what the page size?

03-19-2010, 10:40 PM

I got rid of the huge margin and padding. Then I had a problem with the space around the gallery not being even, but I've managed to get this good by making the rsbox also a % and adding a slight padding to the gallery.

Thanks for your help DWcourse.

My first site!