set a minimum width of a website

http://generationthrive.com

On this site, the leaf images are positioned absolutely. How could I set a minimum position that the right leaf couldn't move past if someone shrank their browser window smaller than the content area?
The same for the background image. It will move out of place if the window is too narrow. How could I keep it in position?
LVL 2
SonicVoomAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineNo oneCommented:
You would need to wrap a new div around the leaf divs and the background div and set the CSS min-width property on that new div to keep things from scrunching up.  This may also require you to change the absolute positioning
0
SSupremeCommented:
Do the following:
<div id="bgimage">
<div id="leaf_left"></div>
<div id="leaf_right"></div>
</div>
#bgimage {background: url("assets/img/logo_bg.jpg") repeat scroll center 0 transparent;
    min-width: 1000px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: -1;
}
#leaf_left {
    background-image: url("assets/img/leaf_left.png");
    background-repeat: no-repeat;
    float: left;
    height: 231px;
    width: 287px;
}
#leaf_right {
    background-image: url("assets/img/leaf_right.png");
    background-repeat: no-repeat;
    float: right;
    height: 327px;
    width: 306px;
}
Oh and you also have unwanted character in head:
</script>`

<!-- Easy FancyBox 1.3.4.9 using FancyBox 1.3.4 - RavanH (http://4visions.nl/en/wordpress-plugins/easy-fancybox/) -->
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SonicVoomAuthor Commented:
Thanks.

#bgimage {overflow:hidden;} seems unnecessary, and #bgimage {z-index:-1;} needed to be one. So far so good.

But I still want the sun to stay centered when the window is <1000px wide. Is this doable?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

SSupremeCommented:
Can't you see what I done?
<div id="bgimage">
<div id="leaf_left"></div>
<div id="leaf_right"></div>

</div>
Bold part is hew home for body background, so remove background from body and apply it to:
#bgimage {background: url("assets/img/logo_bg.jpg") repeat scroll center 0 transparent;
    min-width: 1000px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: -1;
}
If you what sun be fixed in main window create another Div with same params but with fixed position to browser window.
#bgimage {overflow:hidden;} seems unnecessary
Explain, please.
0
SonicVoomAuthor Commented:
Ahh, I misread your first response.

One thing to note is that we want the background fixed, not scrolling. Your code works fine if the background-image is set to scroll, but we're keeping it fixed.
0
SSupremeCommented:
Read this article http://colinaarts.com/articles/the-magic-of-overflow-hidden/
And there are allot of others.
0
SSupremeCommented:
You can use overflow:hidden; instead of <div id="clear"></div> at the end of the div.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.