开发者

960.gs background colours, or margins?

I decided to try and use the 960 grid system on a recent client project to speed up development, and its structure is working perfectly, and I love it!

The problem I'm having is the break in the div background colour (I am not sure to scal开发者_StackOverflow社区e sidebar to 100% height), and the background transparently shows the 10px margins (sidebar and footer). This is a live version of the website so far, it's probably a lot easier to see the problem - it's quite obvious: http://mediasmoke.com/clients/packtv/.

I have the structure I want, the divs are in the right place. Is there a technique to fill in those blanks and keep the website flexible in height for more or less content?

I'm drawing a blank, and I tried using a second container, but that didn't work properly...


Yes, as aSeptik said wrap .content and .sidebar in a div and apply the background to that. .alpha and .omega don't fix the problem. It looks like you will need to do the same on the footer columns too.


OK, I figured it out. The reason the second wrapper div didn't expand with the 960gs was because it had to have a float:left.

Now at 960 pixels wide this gave me an extra 10 pixels colour padding on either side. If I trimmed this or made the wrapper smaller, it breaks the 960gs, making it useless. After messing about with a simple solution, I found I was to create a background image that was 960 pixels wide with transparency - 10 pixels on either end, so it gives the impression of 940 pixels!

Yay!

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜