Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Jan 24, 2013 01:12 PM by Afzaal.Ahmad.Zeeshan
Jan 23, 2013 01:38 PM|LINK
I have a pretty basic site I'm working on that I'm trying to do something simple in, but keep running into an oddity.
I want the <body> to expand the entire browser window, but I don't want it to be able to go outside the browser window, so I set max-width: 100%. Then, because one of my container elements actually expands off the screen, I set overflow-x: hidden.
This kind of works in Firefox, except when someone scrolls to the bottom of the page. Then it's like the browser ignores the attribute and it you can scroll off to the right.
I've never used the individual overflow styles, so I'm just wondering if I'm approaching this incorrectly and if anyone has any advice.
Here are the important parts of my CSS:
background: rgb(232, 228, 198);
margin: 0 auto;
background-color: rgb(200, 194, 151);
margin: 0 0 3em -100%;
padding: .5em 0 1em 0;
The .sctEmailSignup is a "bar" that goes across the entire width of the screen, yet the content is supposed to still be in my column. That's why you'll see the width: 300% and margin-left: -100%;
If there's a better way to accomplish that, I'd love to know.
Jan 24, 2013 01:19 AM|LINK
Post your code
Jan 24, 2013 08:47 AM|LINK
The best way would be to set the limit of the whole body element. like
Now that body will have 95% of the page. You can use a meta tag to support every device width like
<meta name="view-port" content="width=device-width">
This way site will always change according to the device.
Now use width 100% or what ever for your divs. They will always stay in column.
If you still get problems. Use
To fully block the width to exceed!
Jan 24, 2013 01:11 PM|LINK
Thanks, Afzaal. That didn't seem to fix my problem, so I went the easier route and just added my wrapper class, which set the content's width and centered it with margin: 0 auto.
It works. I was just trying to avoid having to apply the class to all my sections.
Jan 24, 2013 01:12 PM|LINK
I also didn't provide you with any code with a class.
My option was to set a width!