Fluid 100% width showing large horizontal scroll
I can't figure this out - but I'm sure someone out there can... I'm working on a new fluid width set to 100%, with min and max widths set for the content wrapper.
The problem arises when the 开发者_JAVA百科header area isn't set to overflow:hidden - a large horizontal scroll appears, even though the margin is set to auto and there should be no overflow. Here's a link
If any smart person could check it out with a fresh pair of eyes it would be a big help! E.g. using Chrome inspector you could see the code, or I could post the CSS (currently inline until I assign the divs ids and classes)...
4 divs under your header you have 3 divs that are relatively positioned... They have margins of more than 600 px, widths of 100%, and are positioned several hundred pixels from the left side... Removing these fixed the scroll issue but also deleted some of the header, will post screenie...
Give them proper widths this time...
The reason for this is because of the two div
s containing the birds on the header. The div
s are block level elements, which means that they assume the width of their parents, and relatively positioned, so when they get moved, they push out of the containing div
's right and create the scrollbar. Here's what you see if you add a background to the two div
s
The solution here is to simply assign both div
s a width.
精彩评论