Floating Two Div Boxes at 800 x 600
Hi everyone,
I'm currently working on a personal website and I'm having a problem with floating two div boxes.
Here is the site: http://www.boudywedding.nezik.com/
Here is my CSS:http://www.boudywedding.nezik.com/css/main.css
The problem I am having is with the #rightbox and the #leftbox. At 800 x 600, the rightbox overlaps the leftbox.
I'm not sure if there is a way around this, it's got me stumped.
Thanks for any help on the matter.
webwiz posted this at 04:51 — 12th May 2007.
He has: 629 posts
Joined: May 2007
Here's the math:
#left_box is 250px wide + 10px padding = 260px
#right_box is 170px wide due to the image + 50px padding = 220px
#content_main has left+right margins = 320px
Things go awry when the two boxes don't have enough space. That is when the box widths plus content margins is greater than the window size. This happens at 260px + 220px + 320px = 800px.
If you allow the #left_box to contain all its content, by eliminating its height declaration, you will see a regular float-drop at 800px instead of the overlap.
Not a solution, but hope it helps.
Cordially, David
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
cboudy posted this at 00:41 — 21st May 2007.
They have: 13 posts
Joined: May 2006
David, thank you. That solution did work. I was just looking for way for the two div boxes to degrade gracefully.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.