Слой второй колонки не учитывает отступ от слоя шапки

Develax · July 8, 2012

Здравствуйте, пару дней, как начал изучать HTML, возник такой вопрос:

Простой шаблон страницы: шапка(1), левая колонка(2), правая колонка(3), подвал(4).

Левая и правая колнки лежат в отдельном слое(5), т.к. собирался делать третью колонку справа.

Для всех элементов задан margin: 5px.

Левая колонка(2) отстоит от шапки(1) на 5px + 5px ее собственный отступ.

Правая же колонка(3) игнорирует отступ от шапки(1), учитывает только свой, почему так происходит?

Пробую сделать для правой колонки margin-top: 10px, но тогда на 10 пикселей отъезжает весь слой (5).

Если убираю слой(5), margin-top: 10px корректирует проблему, но все равно непонятно, почему требуется эта корректировка.

Еще не очень принципиальный вопрос (но все же интересно узнать): как можно левую колокну заставить растягиваться на всю высоту слоя-контейнера(5)?

Height: 100% не работает.

Благодарю за разъяснения.

CSS:


html
{
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body
{
    display: block;
    margin: 0px;
}

#header, #leftPanel, #rightPanel, #bottomPanel
{
    border: medium solid #33CCFF;
    margin: 5px;
}

#container1
{
    background: LightBlue;
}

#header
{
    padding-left: 25px;
    padding-right: 25px;
    font-family: Comic Sans MS;
    font-size: large;
}


#leftPanel
{
    width: 300px;
    font-family: 'Times New Roman' , Times, serif;
    font-size: large;
    font-weight: normal;
    float: left;
}

#rightPanel
{
    margin-left: 315px;
}

#bottomPanel
{
    clear: both;
}

HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Супер-сайт</title>
    <link href="_layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="header">
        <h1>
            Заголовок сайта
        </h1>
    </div>
    <div id="container1">
        <div id="leftPanel">
            <ul>
                <li>Плюшки</li>
                <li>Баранки</li>
                <li>Дранки</li>
                <li>Гренки</li>
            </ul>
        </div>
        <div id="rightPanel">
            <ul>
                <li>Плюшки</li>
                <li>Баранки</li>
                <li>Дранки</li>
                <li>Гренки</li>
                <li>Плюшки</li>
                <li>Баранки</li>
                <li>Дранки</li>
                <li>Гренки</li>
                <li>Плюшки</li>
                <li>Баранки</li>
                <li>Дранки</li>
                <li>Гренки</li>
                <li>Плюшки</li>
                <li>Баранки</li>
                <li>Дранки</li>
                <li>Гренки</li>
                <li>Плюшки</li>
                <li>Баранки</li>
                <li>Дранки</li>
                <li>Гренки</li>
                <li>Плюшки</li>
                <li>Баранки</li>
                <li>Дранки</li>
                <li>Гренки</li>
                <li>Плюшки</li>
                <li>Баранки</li>
                <li>Дранки</li>
                <li>Гренки</li>
            </ul>
        </div>
    </div>
    <div id="bottomPanel">
    </div>
</body>
</html>

Develax · July 8, 2012

Решил попробовать добавить в слой-контейнер(5) float: left, оказалось что-то чудесным образом решает основную проблему топика. После работы с XAML, где внутренний элемент никак не может повлиять на расположение родительского, логика поведения html кажется несколько причудливой.

Sign In

Слой второй колонки не учитывает отступ от слоя шапки

Question

Develax

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Develax

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information