CSS Container not growing with grid?

Answer 1

Your container is fixed width and won't grow. What you're probably looking for is min-width. In other words, change:

width:970px;

to:

min-width:970px;

As a note, IE 6 and 7 treat width as min-width, but other browsers do not.

Answer 2

I think you need this in your CSS:

overflow: auto;

Answer 3

.container { overflow:hidden; }

assuming you are dealing with floats, this is one way to make the container actually contain them.

Answer 4

Depending on your float situation for the container and the inside grid, you can do a number of different things. You might be able to get away with just adding a clear,

clear:both;

You also can float the parent. This is called, setting a float to fix a float. So if your grid has a

float:left;

Then you can just add

float:left;

to your container css. I really like the Complex Spiral article on containing floats.

Answer 5

I've seen this happen many times when you have floats inside. Add a clearing div just before closing container. You should always clean up after floats.

<div class="container">
  <div id="nav" style="float:left;">
  ...
  </div>
  <div id="grid" style="float:left;">
  ...
  </div>
  <div style="clear:both;"></div> <!-- this does the trick -->
</div>

I disagree with adding float to container. Although this will work, having unnecessary floats will give you more problems down the road. Only use floats where necessary and clear it when done floating.

Also in my experience, overflow doesn't mean anything here unless you define height. I don't think setting overflow on container fixes the issue here. Correct me in the comments if I'm wrong.