div / CSS вопрос относительно ширины и отступов

Question

У меня проблемы с этим кодом:

CSS:

div#header
{
    width: 100%;
    background-color: #252525;
    padding: 10px 0px 10px 15px;
    position: relative;
}

div#login
{
    float: right;
    position: absolute;
    right: 10px;
    top: 5px;
}

HTML:

<div id="header">
    <img src="./img/logo.jpg" />
    <div id="login">
        <form id="header-login" action="#">
            <input type="text" /> <input type="text" /> <input type="submit" value="LOGIN" />
        </form>
    </div>
</div>

Тег div id = header имеет отступ слева в 15px. Из-за этого сам div растягивает ширину страницы плюс дополнительные 15 пикселей вправо, в результате чего у меня появляется горизонтальная полоса прокрутки. Я пытался поместить заголовочный div в контейнерный div с относительным позиционированием, но из-за заполнения, заголовочный div просто переполнял контейнер на 15px, оставляя меня с боковой панелью. Может ли кто-нибудь помочь мне с лучшим пониманием? Спасибо.

Answer 1

Попробуйте удалить 100% ширину заголовка. Поскольку div - это линейные элементы, в этом нет необходимости.

Answer 2

Я не совсем уверен, что вы пытаетесь достичь, но вот стартер:

элементы блока (например, div) всегда расширяются до ширины вашего контейнера, если вы не используете режим причуд в IE.

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

Если вы хотите, чтобы плавающий элемент был «наверху», его нужно сначала указать в его родительском элементе. Смысл, поместите div перед img.

div#header { 
   background-color: #252525; 
   padding: 10px 0px 10px 15px; 
}

div#login { 
   width: 100px; /* use preferred size here. */
   float: right; 
   margin-right: 10px; 
   margin-top: 5px; 
}

Answer 3

Попробуйте использовать заголовок div с этим.

div#header { width: 100%; height:15px; background-color: #252525; padding: 10px 0px 10px; position: relative; }

Answer 4

Будет ли «переполнение: скрыто» на контейнере правильного размера работать?