CSS Container not growing with grid?

I have a container backgroun开发者_StackOverflowd defined in CSS like this;

.container {
    background:#fff;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    width:970px;
    border:1px solid #000;
    padding:5px 10px;
}

The problem is I have a jqGrid put in the bottom of the container (near the bottom edge) and when its initially drawn it does fit inside the container panel and looks correct. Something like this (please pardon my non-l33t graphic skillz):

alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg

But then when I populate the grid with rows it outgrows the container and it looks really tacky, something like this (I circled the original container background edges):

alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg

I am sure its something I am doing wrong with the CSS. Any advice would be appreciated.

EDIT: The problem isn't the width its the height of the container being overlapped by the new height of the now populated grid

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.

.container { overflow:hidden; }

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

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.

I think you need this in your CSS:

overflow: auto;

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.