奇怪的HTML / CSS问题

时间:2013-06-30 09:36:13

标签: html css

我知道已被问过很多次,但我仍然无法找到解决这个问题的方法。以下是我的内容:JsFiddle

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:auto">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:100%;width:auto;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:100%;width:auto;float:left;">
test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content </div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © something</div>

</div>

</body>
</html>

我们的问题是内容在菜单下面。我尝试了一切以解决它,但似乎不可能。我很确定我错过了一些小事。

编辑:内容应该在菜单旁边,菜单shuld有100%高度

3 个答案:

答案 0 :(得分:4)

而不是内容float:left,请将其替换为overflow:auto

这会触发block formatting context并导致内容填充剩余的水平位置。请参阅this帖子。

更新了FIDDLE

答案 1 :(得分:0)

position:absolute;添加到id="menu"height:auto

#menu{
background-color: #FFD700;
height: auto;
width: auto;
float: left;
position: absolute;
}

LINK

或者如果您希望它在菜单旁边而不是LINK

float移至id="content"

答案 2 :(得分:0)

将父div用于菜单和内容,为其指定样式overflow:hidden

然后给菜单说一些宽度20%float:left 对内容提供float:right和宽度80%

我已更新您的jsfiddle链接..它显示正确的结果