导航栏按钮不会留在父母中

Question

我试图为我的网站制作一个导航栏，但是＆＃39; info＆＃39;按钮不会留在父母内部。这是我的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