Почему этот столбец div не идет полностью вправо?

Question

Как ни странно, мой веб-сайт нормально отображается в Internet Explorer, но не работает в браузерах на базе Mozilla.

Вот скриншот:

Кто-нибудь видит, почему «правая панель» не идет вправо? Вы можете видеть, как он не выровнен по правому краю «верхней панели»:

#container
{
    margin: 0 auto;
    width: 750px;
    background-color: #ffffff;
}

#top-panel
{
    padding-left: 10px;
    background-color: #000000;
    text-align: left;
    width: 100%;
    height: 88px;
}

#left-panel
{
     padding-top: 10px;
     text-align: center;
     background-color: #ffffff;
     border-right: 1px dashed #000000;
     float: left;
     width: 250px;
}

#right-panel
{
    background-color: #ffffff;
    float: right;
    width: 449px;
}

.clear
{
    clear:both;
    line-height:0;
}

Если кто-то хочет увидеть реальный сайт, то это: Математическое реле

Answer 1

Когда вы применяете width: 100% и также используете padding-left: 10px , сначала вычисляется ширина, а затем применяется отступ, поэтому на самом деле ваш # top_panel Проблема с объявлением CSS. Попробуйте установить для него фиксированную ширину.

Answer 2

По аналогии с другими ответами, но, надеюсь, с объяснением того, что происходит за кулисами:

width: 100% на #top-panel относится к ширине области содержимого div, исключая границы, отступы и поля. Таким образом, когда вы указываете width: 100% и padding-left: 10px, ширина #top-panel, включая отступы, фактически равна 10px + 750px (отступы плюс 100% ширины #container.)

На мой взгляд, лучшим решением является удаление width: 100% из #top-panel. Это заставит div занимать всю ширину родительского элемента без переполнения #container.

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

Answer 3

Padding-Left: 10px приводит к появлению дополнительных 10 пикселей с правой стороны.

Answer 4

это отступ слева: 10px; в # верхней панели

Установите значение 0, и вы увидите, что они выстроились в линию.

Попробуйте использовать FireBug, вот как я нашел проблему.

Answer 5

Это ваш #top-panel, это 10px больше, чем ваш #container из-за вашего padding-left: 10px;

Просто добавьте 10px к вашему #container, и это будет хорошо.

Answer 6

Удалить width: 100% из #top-panel.