2

I'm working on a layout using the 960 CSS grid layout and having some trouble getting my content div to stretch all the way to the bottom, no matter how much content there is.

I have height: 100% on both html and body tags. Usually a min-height: 100% on the content div would work but that does not seem to be the case with the 960 grid.

Any ideas?

Johan Alkstål
  • 5,225
  • 9
  • 36
  • 48
  • Have you checked with FireBug or whatever tool to check if any of the values you have set are getting overridden by the 960.gs stylesheet? – Luwe Aug 21 '11 at 21:23
  • Yes. And I've now managed to get my div.container_12 to be full height using min-height: 100% on it. However its content is still not stretching the entire height. – Johan Alkstål Aug 21 '11 at 21:31

1 Answers1

3

Not sure if this answer is still needing to be answered, but I ran into the same problem today working on a wordpress template and solved the problem.

What you have to do is make a wrapper before the container_12 or container_16 that is provided by the grid. You don't need html or body equaling height: 100% at all. You don't even need a min-height on the wrapper.

Make sure that your wrapper doesn't have a height or width set, and put the clearfix on container_12 or container_16 and it should expand all the way down.

I have this working on my wordpress template.

  <div id="yourwrapper">
    <div class="container_12 clearfix">
      <div class="grid_12">

       <!-- YOUR CONTENT SHOULD BE COMPLETELY WRAPPED BY THE WRAPPER -->          

      </div>
      </div>
      </div>
Sethen
  • 31
  • 2