플로트는 서로

Question

라이브 임시 링크 옆 요소를 정렬하지 않습니다 http://www.tajrediat.com/test/

스냅 샷 :

붉은 색 이름이 나타내는 클래스.

흰색 상자 안에/내 안에 내 양식이 있어야합니다. 상자에 넣기 위해 여백과 오른쪽 여백을 사용할 수 있지만, 사회 미디어 섹션에서 양식을 떠 다니는 실용적인 방법이 있습니까?

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 % 너비가된다. 또한 분명히 당신이

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

이 loginbox 및 소셜 미디어의 div의이 새로운 사업부에 "명확한"CSS 클래스를 추가 할 형제 사업부를 추가 아래 같은

귀하의 CSS가해야 뭔가를 떠 있는지 확인

Answer 2

float : right를 추가해야합니다. .loginbox (다른 사람 옆에있는 경우)를 입력하고 나머지 공간보다 작은 너비를 지정하십시오. clear를 사용하여 새 div를 추가하십시오 : 둘 다; 그 아래.