html - 我无法让两个内容区域并排浮动

Question

我不能在不破坏容器的情况下让两个内容区域并排浮动。我将第一个区域提示为 float:left 但是当我提示 float:right 到内容区域 2 时，我的容器不再工作。

该对象确实浮动，但容器消失了。

这是我的网站http://aasdsafasdf.weebly.com/（我还处于早期阶段）

#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}


#content {
float: left;
height: auto;
width: 710px;
}

#content2 {
float: right;
height: auto;
width: 350px;
}

Answer 1

您的页面上有一些标记错误（请注意</script>您的一个样式表链接后的标记？），但只需将您的容器设置为隐藏溢出：

#container {
   width: 1100px;
   margin: 0 auto;
   background: #ffffff;
   overflow:hidden
}
#content2 {
   height: auto;
   width: 350px;
   float:right;
}

那应该可以解决问题。但是请确保您修复了您的代码......它现在有各种各样的问题：http: //validator.w3.org/check ?uri=http%3A%2F%2Faasdsafasdf.weebly.com%2F&charset=%28detect+自动%29&doctype=内联&group=0

Answer 2

#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}


#content {
float: left;
height: auto;
width: 710px;
display: block;
}

#content2 {
float: left;
height: auto;
width: 350px;
display: block;
}

您希望两个内容 div 都向左浮动并成为 display:block;，然后它们将向上推向其左侧的那个。