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.
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.
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.
Marked as answer by airic82 on Jan 24, 2013 01:11 PM
airic82
Member
78 Points
223 Posts
max-width: 100% & overflow-x: hidden
Jan 23, 2013 01:38 PM|LINK
Hey, everyone!
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:
body { background: rgb(232, 228, 198); line-height: 1.5em; max-width: 100%; overflow-x: hidden; } .plCopyWrapper { position: relative; margin: 0 auto; width: 940px; } .sctEmailSignup { background-color: rgb(200, 194, 151); margin: 0 0 3em -100%; padding: .5em 0 1em 0; height: 4em; width: 300%; text-align: center; }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.
Thanks!
-Eric
kuTot
Member
13 Points
36 Posts
Re: max-width: 100% & overflow-x: hidden
Jan 24, 2013 01:19 AM|LINK
Post your code
Afzaal.Ahmad...
Contributor
2660 Points
1039 Posts
Re: max-width: 100% & overflow-x: hidden
Jan 24, 2013 08:47 AM|LINK
The best way would be to set the limit of the whole body element. like
body { width: 95%; }Now that body will have 95% of the page. You can use a meta tag to support every device width like
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
body { max-width: 95%; }To fully block the width to exceed!
~~! FIREWALL !~~
airic82
Member
78 Points
223 Posts
Re: max-width: 100% & overflow-x: hidden
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.
Afzaal.Ahmad...
Contributor
2660 Points
1039 Posts
Re: max-width: 100% & overflow-x: hidden
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!
~~! FIREWALL !~~