не правильно срабатывает margin

[kent666]

Всем привет. Ворост довольно таки простой. но все же

есть верстка

<div class="wrapper">
    <div class="header" id="header">
        <div class="logotips"></div>
        <div class="header-right">
            <div class="top-menu">
                <ul>
                    <li>first</li>
                    <li>second</li>
                    <li>third</li>
                    <li>fourth</li>
                </ul>
            </div>
            <div class="bottom-menu">
                <ul>
                    <li>first</li>
                    <li>second</li>
                    <li>third</li>
                    <li>fourth</li>
                </ul>
            </div>
        </div>
    </div>

и есть css

#header{
    background: green;
    height: 90px;
    min-width: 1000px;
    margin: 0 15%;
    position: relative;
}

.header .logotips {
    height: 90px;
    width: 330px;
    float: left;
    background: grey;
}

.header-right {
    background: black;
    height: 90px;
    padding: 0 0 0 330px;
}

.header-right .top-menu {
    height: 50px;
}

.header-right .top-menu ul {
    margin: 20px 0 0 10px;
}

.header-right .top-menu ul li {
    display: block;
    float: left;
    background: green;
    margin: 0 10px 0 0;
}

.header-right .bottom-menu {
    height: 40px;
    background: white;
}

но margin в top-menu делает отступ не от .header-right .top-menu

a от body

Получаеться вверху шапки щель в 20px

в чем ошибка?

Edited May 7, 2012 by kent666

[Mihail]

это называется margin collapse, что-бы этого не происходило задайте контейнеру родителю верхний padding или border, либо задайте контейнеру свойство overflow:hidden

[kent666]

Спасибо!

[Yazon_Nile]

Боковые маржины,кстати, работают нормально) Только верх/низ такая бедуля.