Предотвратить разрыв строки плавающих элементов

Question

Предотвратить разрыв строки плавающих элементов

0

Я пытаюсь создать заголовок веб-сайта с логотипом, выровненным слева, навигационным div, который имеет ширину 960px и центрирован, а также область входа в систему, которая выровнена по правому краю. Вот скриншот моего прогресса

Проблема в том, что логин перерывается в новую строку, и я не знаю, как его предотвратить. Плавающие элементы не работают.

Вот скрипка

Но он не дает те же результаты, которые я вижу, когда я запускаю его локально.

HTML

<div id="header"><!-- Outside Container, Holds Logo and Log In -->
        <div id="logoHolder">
            <p>logo</p>
        </div>
        <div id="navigation">
            <p>navigation</p>
        </div>
        <div id="loginHolder">
            <p>login</p>
        </div>
    </div>

CSS

/*Header Options*/
#header{
    width:100%;
    background-color:green;
    height:125px;
}
    #logoHolder{
        float:left;
    }
    #navigation{

        width:960px;
        background-color:blue;
        margin-left:auto;
        margin-right:auto;
    }

    #loginHolder{
        float:right;
    }

onTheInternet 14 апр. 2014, в 19:13

Источник

Теги:

html

css

2 ответа

0

Вы должны быть осторожны с шириной. Ширина навигации превосходит другие div. И, если я не ошибаюсь, у div есть встроенный разрыв строки. ответ выше имеет одно решение, я также сыграл с несколькими изменениями: вы можете скопировать в этом css:

/Параметры заголовка /

header {

width:100%;
background-color:green;
height:125px;

}

logoHolder {

width: 100px;
background-color: red;
float:left;

}

навигация {

width:344px;
background-color:blue;
float:left;

}

loginHolder {

width:100px;
background-color:yellow;
float:left;

}

08Hawkeye 14 апр. 2014, в 14:23

Ещё вопросы

j08691 · Accepted Answer · 2014-04-14T13-46-00.000Z

Просто loginHolder свой HTML следующим образом (переместите loginHolder над navigation), и он отлично работает:

<div id="header">
    <!-- Outside Container, Holds Logo and Log In -->
    <div id="logoHolder">
        <p>logo</p>
    </div>
    <div id="loginHolder">
        <p>login</p>
    </div>
    <div id="navigation">
        <p>navigation</p>
    </div>
</div>

Пример jsFiddle

Быстрое и простое решение. Спасибо, сэр. Примут через 10 минут.