重叠的div，以及chrome，firefox和ie 8中奇怪的jqGrid行为

Question

我不是一个css家伙，我已经尝试过自己调试这个问题，但我似乎无法弄清楚如何解决我的问题。我有jqUI模态窗口，其中包含两个div。一个div保存搜索字段，另一个拥有一个具有结果的jqGrid。第一个网格里面有jquery UI标签。第一个div似乎表现得很好，但第二个div似乎与IE 8，firefox和chrome中的第一个div重叠。

我有两个div的类......浮动左和主内容。在IE9中它看起来有点像这样......

在我在其他浏览器中测试我的网站之前，我甚至没有意识到这是一个问题（我知道很大的错误，我应该在firefox或Chrome中开发。经验教训）。无论如何，IE 9上的看起来像这样......

这就是我所期望的样子。所以我显然遇到了一些css重叠问题，并且在不同的浏览器中表现不同。我相信我在相应的css文件中有适当的行...

我绝对不明白为什么两个div保持重叠。我需要弄清楚如何阻止它，但更糟糕的是标题的高度。它似乎从另一个div的高度排队。它们似乎是联系在一起的......如果你看看当我打开另一个标签时会发生什么，你可能会看到我的意思......任何有关如何解决这个问题的想法。如果您有任何见解，那就太棒了。正如我所说，我对CSS不太满意，但如果您有任何想法，可以启动创作过程......

更新

以下是我需要正确的div ...

<div id="searchPatient" class="float-left ui-tabs ui-widget ui-widget-content ui-corner-all">

这将是第一个div与搜索字段的div定义...

    

这将是第二个div的div定义。下面有几个div，包括他们的课程。下面是来自每个css类的每个css的css（我从chrome dev工具中获取它们，所以我可以看到应用的内容和不适用的内容）......

.main-content {
background: url("../images/accent.png") no-repeat;
padding-left: 10px;
padding-top: 30px;
}
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}

.ui-widget .ui-widget {
font-size: 1em;
}
.ui-tabs {
position: relative;
padding: .2em;
zoom: 1;
}

.ui-widget .ui-widget {
font-size: 1em;
}
.ui-jqgrid {
position: relative;
font-size: 11px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
-khtml-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-khtml-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
-khtml-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-khtml-border-top-left-radius: 4px;
border-top-left-radius: 4px;
}
.ui-widget-content {
border: 1px solid #AAA;
background: white url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
color: #222;
}
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: 1.1em;
}
div[Attributes Style] {
direction: ltr;
unicode-bidi: embed;
}

.ui-jqgrid .ui-jqgrid-view {
position: relative;
left: 0px;
top: 0px;
padding: .0em;
font-size: 11px;
}

.ui-jqgrid .ui-jqgrid-titlebar {
padding: .3em .2em .2em .3em;
position: relative;
border-left: 0px none;
border-right: 0px none;
border-top: 0px none;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
-khtml-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-khtml-border-top-left-radius: 4px;
border-top-left-radius: 4px;
}
.ui-widget-header {
border: 1px solid #671966;
background: #881B6F url(images/ui-bg_highlight-soft_75_881b6f_1x100.png) 50% 50% repeat-x;
color: #671966;
font-weight: bold;
}

似乎很多。似乎也可能有很多重叠。我正在努力理顺这一切。

<div id="searchPatient" class="float-left">
</div>
<div class="content-wrapper main-content clear-fix">
    <table id="list" class="scroll"></table>
</div>    
<div id="resultDiv"></div>

我不明白为什么我的帖子会在发布时变形。但我确实尝试设置第一个div上的像素，其中类是float-left。它确实有效，但我仍然需要弄清楚为什么我的div重叠，为什么我的第一个div的边界消失了。可能是因为我把它设置到一个固定的水平。也许我可以在我的另一个div周围包裹另一个div并设置它的高度？

OK ... 这是我设置其中一个div向左浮动而另一个向右浮动时得到的结果......

像往常一样ie8看起来很好。我怎样才能让它们像ie9那样一起看起来像那样。