Search code examples
htmlcsslayoutcentergraphical-logo

How do i center an HTML DIV with logo on the left?

i want to center a div called #top_menu 

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

CSS-Code: 

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

To the left of the top menu should be a logo (#logo)

This is what i have so far:

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

Now comes the problem

If i have a browser window that is smaller than 800px the center div overlays the logo div. It would be nice if there are scrollbars instead. How do i do this?

Thanks in advance! Freddi

Solution

  • Do this,

    #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
}

    Now your divs will not overlap when window size is smaller.

    Check working example at http://jsfiddle.net/WV8q7/3/