CSS Как стилировать элемент типа Float как столбец (элемент div находится над другим элементом как столбец)

Question

все. Я застреваю в CSS, когда я хочу стилизовать элемент в порядке, подобном стилю столбца, я использовал атрибут float, но я не отображаю, как хочу, они отображаются в строке например Я хочу, чтобы они отображались как показано ниже

a c
b d

но они всегда отображаются как

a b c d

Вот мой код:

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:

<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

Вот хороший ресурс для плавающего.

Если вам нужны только два столбца, вы можете определить ширину контейнера.Затем они свернутся, как вы хотите.