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!
精彩评论