jqgrid - CSS Container not growing with grid? -


I have a container background that is defined in CSS as follows;

  .container {background: #fff; Margin-left: auto; Margin-Correct: Auto; Status: Relative; Width: 970px; Limit: 1px solid # 000; Padding: 5px 10px; } The problem is that I have placed a jqGrid (near the bottom edge) of a container and at the beginning it looks fit and fit inside the container panel. Something like this (please excuse your non-l33t graphic skillz):  

But then when I populate the grid with the rows, the container gets out and it It's really easy, something like that (I captured the original container background edges):

I am sure that I am doing something wrong with CSS. Any advice will be appreciated.

Edit: The problem is not the width. Its container height is now overlapping with the new height of the population grid.

I have noticed that this happens many times when you float in. Add a clearing unit before closing the container. You should always clean after floats.

  & lt; Div class = "container" & gt; & Lt; Div id = "nav" style = "float: left;" & Gt; ... & lt; / Div & gt; & Lt; Div id = "grid" style = "float: left;" & Gt; ... & lt; / Div & gt; & Lt; Div style = "clear: both;" & Gt; & Lt; / Div & gt; & Lt ;! - This is the trick - & gt; & Lt; / Div & gt;  

I disagree with this though this will work, due to unnecessary float, you will get more problems under the road. Use Floats only as needed and clear it while floating.

In my experience, overflow is nothing here unless you define height I do not think overflow on the container Setting fixes the problem. If I make a mistake, then correct me in comments.


Comments

Popular posts from this blog

asp.net - Javascript/DOM Why is does my form not support submit()? -

sockets - Delphi: TTcpServer, connection reset when reading -

javascript - Classic ASP "ExecuteGlobal" statement acting differently on two servers -