Как центрировать HTML DIV с логотипом слева?

Question

Я хочу центрировать div с именем #top_menu

<div id="top_menu">This is the menu and it is in the middle of the page</div>

CSS-код:

#top_menu { margin: 0 auto; width: 600px; ... }

Слева от верхнего меню должен быть логотип (#logo)

Вот что у меня есть:

#logo { position: absolute; top: 0px; left: 10px; width: 200px }

Теперь приходит проблема

Если у меня есть окно браузера, которое меньше, чем 800px, центр div перекрывает логотип div. Было бы хорошо, если бы вместо этого были полосы прокрутки. Как мне это сделать?

Заранее спасибо! Freddi

Answer 1

Сделай это,

#top_menu{
    width:800px;
    margin:0 auto; 
    border:1px solid red;
    display:block;
}

#logo { 
    float:left;
    width: 200px;
    height:50px;
    background:white url(logo.png) no-repeat 0 0
}

Теперь ваши div не будут перекрываться, когда размер окна меньше.

Проверьте рабочий пример на http://jsfiddle.net/WV8q7/3/

Answer 2

Понял:

#logo
{
    float: left;
}

И

#top_menu
{
    margin: 20px auto 0;
    height:29px;
    width: 602px;
}

HTML

<div id="logo"><img src="<?=site_url('img/logo.jpg')?>" /></div>

        <div id="top_menu">



            <ul id="top_links">
                <li><a href="<?=site_url()?>">Startseite</a></li>
                <li><a href="<?=site_url('static/impressum')?>">Impressum</a></li>
            </ul>
        </div>

Answer 3

попробуйте это (в CSS):

#top_menu { overflow: auto; }

Конечно, вы должны иметь свой логотип в теге div.