html 左边距最小,html – 具有最小宽度和边距的CSS浮动

我希望你能帮助解决一个让我疯狂几个小时的问题.我正在尝试为搜索引擎设计一个页面,该页面可以添加X个条件,然后执行搜索.我正在尝试让条件框重新调整大小,具体取决于条件数量和屏幕分辨率.我希望它以初始大小加载,然后根据添加到它的内容自行调整大小,以便下面的搜索按钮和搜索结果向下移动.现在,我可以使用最小宽度：100％,但这会产生滚动条,文本溢出到页面右侧,因为我使用的是margin-left：340px;将此框移动到右侧,因为它左侧有另一个框,searchList.

删除最小宽度会导致滚动条消失,但在添加元素之前不会绘制框.添加一个元素会导致绘制一个小框,只有在添加几个框之后,整个框才会变为正确的大小.是否有某种方法可以将盒子侧向移动并使其与页面的其余部分保持一致,实现这一目标的最佳方法是什么？

它在chrome和firefox上都是一样的.

我正在谈论的框是< div id =“searchCriteria”>< / div>.完整代码如下.我真的很感激任何帮助:)

body {

padding:0px;

margin:0px;

}

#content {

min-width:950px;

}

#header {

height:130px;

background-color:blue;

}

#searchList {

width: 300px;

height: 400px;

background-color:green;

position:absolute;

}

#searchCriteria {

background-color:red;

float:left;

min-height:400px;

min-width: 100%;

margin-left: 340px;

}

#searchResults {

background-color:purple;

height: 800px;

width: 100%;

float:left;

}

.criteria {

border: 1px solid black;

padding: 10px;

margin: 10px;

float: left;

width: 400px;

}

#buttonAndStatus {

float:left;

background-color:pink;

width:100%;

text-align:center;

}

function add(){

$("#searchCriteria").append("

This is a bit of search criteria.

");

}

fasdfasdfasdf asdf asdf asdf asdf asdf asdf

asdf asdf asdf asdf