CSS 스타일을 지정하는 방법 플로트 요소는 column과 같습니다 (div 요소는 다른 요소 위에 있습니다)

Question

all. CSS에서 멈추는 경우, 열 스타일과 같은 순서로 요소를 스타일링하고 싶지만 float 특성을 사용했지만 원하는대로 표시하지 않으면 줄에 표시됩니다.

CSS :

div#Wrapper 
{ 
    margin: 0 auto; 
    position: relative; 
    min-height: 670px; 
    min-width : 1280px; 
    overflow: hidden; 
    text-align: left; 
} 

/* HEADER STYLES 
----------------------------------------------------------*/ 

    div#Header 
    { 
     background: url(../Images/Backgrounds/Header_Bg.png) repeat-x left bottom; 
     float: left; 
     height: 74px; 
     padding-bottom: 21px; 
     padding-top: 10px; 
     position: relative; 
     text-align: left; 
     overflow: hidden; 
     width: 100%; 
    } 

    div#Header .logo 
    { 
     border: none; 
     float: left; 
     margin-left: 46px; 
    } 

    div#Header .search-tool 
    { 
     float: left; 
     height: 61px; 
     margin-left: 165px; 
     width: 429px; 
    } 

    div#Header .language 
    { 
     background: #75787a url(../Images/Icons/Language.png) no-repeat left top; 
     color: #dedfdf; 
     cursor: pointer; 
     float: right; 
     font-size: 0.8em; 
     font-weight: bold; 
     line-height: 25px; 
     height: 25px; 
     margin-right: 18px; 
     margin-top: 9px; 
     padding: 0 19px 0 48px; 
     text-align: center; 
     text-transform: uppercase; 
    } 

    div#Header .login-link 
    { 
     color: #909090; 
     float: right; 


    } 

    div#Header .login-link a 
    { 
     background-repeat: no-repeat; 
     color: #909090; 
     cursor: pointer; 
     font-size: 0.75em; 
     font-weight: bold; 
    } 

    .login-link .register 
    { 
     background-image: url(../Images/Icons/Register.png); 
     padding-left: 15px; 
    } 

    .login-link .signin 
    { 
     background-image: url(../Images/Icons/signin.png); 
     padding-left: 18px; 
    } 

    div#Header .weather 
    { 
     float: right; 
     height: 40px; 
     margin-right: 40px; 
     width: 215px; 
    } 

    .weather .weather-image 
    { 
     border: none; 
     float: left; 
     text-align: left; 
    } 

    .weather .temperture 
    { 
     color: #c7c7c7; 
     float: left; 
     font-size: 2.25em; 
     font-weight: bold; 
     margin: 10px 10px 0 -10px; 
     line-height: 24px; 
    } 

    .weather .city 
    { 
     color: #c7c7c7; 
     font-size: 0.7em; 
     font-weight: bold; 
     padding-top: 10px; 
     text-transform: uppercase; 
    } 

    .weather .country 
    { 
     color: #7f7f7f; 
     font-size: 0.7em; 
     font-weight: bold; 
     text-transform: uppercase; 
    } 

    div#Header .social-link 
    { 
     float: right; 
     position: absolute; 
     top: 65px; 
     right: 200px; 
    } 

    .social-link .yh-link 
    { 
     background: url(../Images/Icons/social-link.png) no-repeat right -2px; 
     cursor: pointer; 
     float: right; 
     height: 12px; 
     overflow: hidden; 
     text-indent: -9999em; 
     width: 80px; 
    } 

    .social-link .skype-link 
    { 
     background: url(../Images/Icons/social-link.png) no-repeat -70px top; 
     cursor: pointer; 
     float: right; 
     height: 17px; 
     margin: 0 10px; 
     overflow: hidden; 
     text-indent: -9999em; 
     width: 40px; 
    } 

    .social-link .facebook-link 
    { 
     background: url(../Images/Icons/social-link.png) no-repeat left -1px; 
     cursor: pointer; 
     float: right; 
     height: 12px; 
     overflow: hidden; 
     text-indent: -9999em; 
     width: 60px; 
    } 

HTML :

예를 위해 나는 그들이 항상 곁에 여기

a b c d 

처럼 표시

a c 
b d 

하지만

아래처럼 표시 원하는 것은 내 코드입니다

<div id="Wrapper"> 
     <div id="Header"> 
      <img class="logo" alt="Viet Ban Do Logo" src="Images/Icons/Logo.png" /> 
      <a class="language">Tiếng Việt</a> 
      <div class="login-link"> 
       <a class="register">Register</a> | <a class="signin">Sign in</a> 
      </div> 
      <div class="weather"> 
       <img class="weather-image" alt="" src="Images/Icons/weather_sun.png" /> 
       <span class="temperture">32</span> 
       <p class="city"> 
        Ho chi minh, city</p> 
       <p class="country"> 
        Viet nam</p> 
      </div> 
      <div class="social-link"> 
       <a class="yh-link">Viet Ban Do Yahoo Nick</a> <a class="skype-link">Viet Ban Do skype 
        nick</a> <a class="facebook-link">Viet Ban Do facebook link</a> 
      </div> 
      <div class="search-tool"> 
       <p class="search-control"> 
        <input type="text" /> 
        <a></a> 
        <input type="button" /> 
       </p> 
      </div> 
     </div> 
    </div> 

미리 감사드립니다. 고맙습니다. 당신은 단지 두 개의 열을 원하는 경우에

Answer 1

Here is a good resource on floating.

당신은 컨테이너의 폭을 정의 할 수 있습니다. 그러면 원하는대로 포장됩니다.