CSS floating divs are forced down when window size reduced!

Rudy · 08-15-2008, 11:37 PM

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 · 08-16-2008, 12:47 AM

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 · 08-16-2008, 05:59 AM

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 · 08-16-2008, 06:04 AM

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

Rudy · 08-16-2008, 06:18 AM

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.

08-15-2008, 11:37 PM	THREAD STARTER #1 (permalink)
Rudy NamePros Regular Join Date: Jul 2005 Location: United States Posts: 586	CSS floating divs are forced down when window size reduced! 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

08-16-2008, 12:47 AM	#2 (permalink)
shockie Senior Member Join Date: Dec 2006 Posts: 4,702	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. __________________ - shockie

08-16-2008, 06:04 AM	#4 (permalink)
shockie Senior Member Join Date: Dec 2006 Posts: 4,702	glad i could help! hopefully there weren't too many people affected by this since 870px is fairly skinny a width. __________________ - shockie

08-16-2008, 05:59 AM	THREAD STARTER #3 (permalink)
Rudy NamePros Regular Join Date: Jul 2005 Location: United States Posts: 586	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.

08-16-2008, 06:18 AM	THREAD STARTER #5 (permalink)
Rudy NamePros Regular Join Date: Jul 2005 Location: United States Posts: 586	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.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)