CSS floating divs are forced down when window size reduced!

[Rudy]

Hey guys,
I'm having a really annoying problem with some of my css on huntsources.com. I have a floating div "left" and a floating div "middle" that are intended to be side-by-side columns. On my screen resolution of 1024x768 when the browser is maximized, it looks fine.

However, when the browser window's width is reduced, div "middle" is forced below the links. Why is this happening, and how can I fix it?

external css file is located at huntsources.com/main.css.

- David

 

[shockie]

well if you make your screen/window width to less than 810px then the second one is bound to be shoved down... perhaps having a container around the whole thing will do the trick.

 

[Rudy]

I got it! Thanks so much for the suggestion. I did it by expanding everything to 870px (due to margins and borders), and then adding that container div like you suggested. I then had to remove the position:absolute that I had on the "header" and "main-page" divs. After all that, it works perfectly. Tested it in IE and Firefox, made sure the code was valid, and voila! That issue is solved.

 

[shockie]

glad i could help! hopefully there weren't too many people affected by this since 870px is fairly skinny a width.

 

[Rudy]

The only reason I found the problem was my brother just bought a brand new Macbook and was here for a few days earlier this week, and he pulled up the website on Safari, and it did that. At first I thought it was a safari problem, then realized all my code was completely valid, so I decided to see what would happen in Firefox / IE if I resized my browser window... you know the rest of the story.