0

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
GodsDead
  • 325
  • 1
  • 3
  • 11
  • use `.alpha` and `.omega` class to remove the margin or set it manually `#sidebar.grid_3{ margin:0}` or create a wrapper that include both the `.sidebar` and the `.content` – Luca Filosofi Aug 12 '11 at 21:22

2 Answers2

1

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.

DevinClark
  • 36
  • 1
  • 4
  • I like the wrapper idea, as its most flexible, it just does not work though, the div is not filled up with the 960gs div .sidebar & .content, the margins have to stay the same as otherwise it breaks the structure of the design. – GodsDead Aug 13 '11 at 16:56
0

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!

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
GodsDead
  • 325
  • 1
  • 3
  • 11