开发者

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...

Fluid 100% width showing large horizontal scroll

Give them proper widths this time...


The reason for this is because of the two divs containing the birds on the header. The divs 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 divs

Fluid 100% width showing large horizontal scroll

The solution here is to simply assign both divs a width.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜