导航栏按钮不会留在父级

Question

我正在尝试为我的网站制作导航栏，但“信息”按钮不会留在父级中。这是我的 HTML：

<div id="header">
<div id="homeB">
    <a href="" id="homeBTEXT">HOME</a>
</div>
<div id="infoB">
    <a href="" id="infoBTEXT">INFO</a>
</div>
</div>
<div id="main"></div>

还有我的 CSS：

#header {
height:11%;
width:70%;
background:violet;
margin-left:15%;
}

#main {
height:100%;
width:70%;
background:blue;
margin-top:1%;
margin-left:15%;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
display:inline-block;
}

#homeB {
width:20%;
height:100%;
background:red;
}

#homeBTEXT {
display:block; 
font-size:250%; 
text-align:center; 
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}

#infoB {
width:20%;
height:50px;
background:red;
float:right;
left:64.2%;
}

#infoBTEXT {
display:block; 
font-size:250%; 
text-align:center; 
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}

有人可以澄清为什么这不起作用吗？ 谢谢，我不擅长很多 HTML 和 CSS 元素，所以任何额外的帮助也将不胜感激:)

Answer 1

将float: left; 分配给#homeBTEXT 并清除#header！

#homeBTEXT {
    display:block; 
    font-size:250%; 
    text-align:center; 
    text-decoration:none;
    font-family:Impact, charcoal, sans-serif;
    color:blue;
    float:left;
}

#header {overflow: hidden;}

预览

小提琴：http://jsbin.com/setipusabihu/1