brianbam — 2012-06-21T16:28:18-04:00 — #1
So, my site is starting to look decent but for someone reason I'm getting some horizontal scroll. I think that it is being caused by the header section and my nav but I can't get rid of the the extra scroll. I tried overflow hidden, but that didn't help. Any suggestions?
ralphm — 2012-06-21T17:52:32-04:00 — #2
Hm, there are several problems there. The Phone div, the MiddleHeader and Nav divs are all placed too far right—the latter two because they are set to width: 100% but then have left padding, which doesn't work.
To fix this, you need to change your layout strategy. The first thing to do is to wrap the whole page in an outer "wrapper" div and set it to the preferred width of your content. Give it margin: 0 auto; to center it. Then remove the left/right paddings / margins of the elements inside it. There will be some extra tweaking for things like the phone div, but that will have to come later.
brianbam — 2012-06-22T02:22:31-04:00 — #3
So, I did what you said and put the content within a div and set that div to 70% of page(body which is set at 100%). However, the reason I did it the way that I originally did is that the background image of nav and middle portion of the header would be restricted to 70% of the page and not fill the whole screen. However, I tried putting everything in the div and the nav and middle header background were limited to 70% of the screen. So, I just took the background of the middle part of the header and nav and placed them above the div and used a negative top margin to pull the images up to the background of the middle header section. However, when i tried this with the ul it became hidden under the image i wanted to act as its background. So, did I do what you were suggesting or was I wrong and how do i get the nav list to appear above its background image? thx
dresden_phoenix — 2012-06-22T03:33:51-04:00 — #4
the gist of what Ralph was trying to say is that padding ( and margin and border) are ADDED to the calculated EFFECTIVE WIDTH of an element.
So , for example if you had a div with 100% width and then gave it 20px of padding-left, you actually have a div that is 100%+20px wide. so you end up needing to get rid of either the padding or the width somehow.
if you cant get rid of the width ( generally block elements such as divs are '100%' width anyway) , then you can do wrap and assign the width to the OUTER element ( the wrap) and padding, etc, to the INNER element.
ralphm — 2012-06-22T04:06:39-04:00 — #5
OK, the way around that (as you guessed) is to take the header out of the main wrapper and let it stretch to 100% width (which it will do naturally anyhow) and place the cloud image on that as a background. THEN ... create a div inside that with a width of 70% (like the wrapper) and center it with margin: 0 auto; (like the wrapper). Inside that you put your logo etc, just as you put other content inside your wrapper. That will save you having to put nasty margins on the logo etc. which don't work properly anyway (as you'll see if you scale the width of the browser).
So, anything that needs to be centered should be in a centered div, and if you need a backgrond image that stretches the full width of the browser, wrap another div around that (which will be 100% width) and put the image on that as a background. Don't put decorative images in the HTML itself.