浮动不对齐元素互相

Question

现场的临时线路旁：http://www.tajrediat.com/test/

快照：

红色名字所代表的类。

我希望我的表单能够在/在白框内。我可以使用margin-right和margin-top将它放入框中，但有没有一种实际的方法可以通过社交媒体部分来浮动窗体？

HTML：

<div class="container"> 
     <header> 
      <div class="logo"> 
      </div> 
      <nav> 
       <ul> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
       </ul> 
      </nav> 

      <div class="mainbanner"> 

      </div> 
      <div class="loginbox"> 
       <form> 
        <ul> 
         <li> 
          <label>Username</label> 
          <input type="text"/> 
         </li> 
         <li> 
          <label>Password</label> 
          <input type="password"/> 
         </li> 
         <li> 
          <input type="checkbox"/> 
          <label>Remember me?</label> 
         </li> 
         <li> 
          <input type="submit" value="Login"/> 
         </li> 
        </ul> 
       </form> 
      </div> 
      <div class"socialmedia"> 
       <!-- tweeter--> 
       <!-- facebook --> 
       <!-- googleplus --> 
      </div> 
     </header> 
    </div> 

CSS：

.container { 
    width: 980px; 
    margin: 0 auto; 
} 

.logo { 
    float: right; 
} 

nav { 
    float: right; 
} 

nav ul li { 
    display: inline; 
    padding-right: 13px;  
} 

.mainbanner { 
    float: right; 
    margin-top: 10px; 
    margin-right: 20px; 
} 

.socialmedia { 

} 

.loginbox { 
    height: 182px; 
    background: url(../images/loginbox.png) no-repeat; 
} 

.loginbox form { 
width: 100px; 
} 

.loginbox form ul{ 

} 

如果删除了宽度出来.loginbox形式的，形式会混乱为：

任何想法如何漂浮在上述部分旁边的形式，由白框？

Answer 1

您需要给loginbox div和socialmedia指定宽度，比如50％，否则它将占用100％的宽度。 还要确保您清除漂浮

你的CSS应该像下面

.loginbox, .socialmedia 
{ 
    float:left; 
    width:50%; 
} 
.clear 
{ 
    clear:both 
} 

添加同级股利loginbox和社会化媒体的div和“清晰”的CSS类添加到这个新的div

Answer 2

你需要添加float：right;到.loginbox（如果你希望它旁边的其他），并给它一个小于剩余空间的宽度。添加一个明确的新的div：两个;在那之下。