WorkWise WorkWise - 1 month ago 9
CSS Question

Debugging CSS page overflow

My page is overflowing to the right (there is extra empty space causing a horizontal scrollbar). CSS file is link to css.

The practice I have followed is - in the beginning, setting padding & margin 0 for all used html elements. Then, the top level boxes have width+padding+margin <= 100% to the best of my observation. More importantly, I have debugged in Chrome Developer Tools and Firebug (in Firefox). I went through each container box in the hierarchy in body tag, and each one's width is same as window width. Why then the overflow?

On a related note, if div A contains divs B & C, then A's width will be at least max(width(B), width(C)), right?

Answer

It looks like the problem is on #mainhmenu with 100% width and 5% padding on boths sides from

@media (min-width: 1200px)
  #navigation ul {
  padding: 0% 5%;
}

contributing to an overall width of 110%.

Comments