Treehouse: Grow your CSS skills. Land your dream job.

Center a DIV inside a DIV?

  • # May 20, 2008 at 5:50 pm

    Maybe I’m going about this all wrong, so correct me at any time.

    I’m trying to center a DIV inside of another DIV tag and having issues.

    Here’s what I tried…



    #menu {
    height: 50px ;
    background: url(../_images/header_menu.gif) repeat-x ;
    #menu-items {
    width: 880px ;
    margin: 0 auto ;
    ul#top-nav {
    ul#top-nav li {
    display: inline ;
    ul#top-nav li a {
    display: block ;
    height: 50px ;
    text-indent: -9999px ;
    float:left ;
    ul#top-nav li.about a {
    width: 188px ;
    background: url(../_images/menu_about.gif) bottom center no-repeat ;
    ul#top-nav a {
    width: 167px ;
    background: url(../_images/menu_work.gif) bottom center no-repeat ;
    ul#top-nav a {
    width: 168px ;
    background: url(../_images/menu_services.gif) bottom center no-repeat ;
    ul#top-nav a {
    width: 168px ;
    background: url(../_images/menu_careers.gif) bottom center no-repeat ;
    ul#top-nav a {
    width: 189px ;
    background: url(../_images/menu_contact.gif) bottom center no-repeat ;
    ul#top-nav li a:hover {
    background-position: center center ;

    So, right now my menu buttons are left-aligned but I’d like them to be centered on the page.

    Here is the site I’m working on

    Any and all feedback pertaining to achieving my goal will be much appreciated.

    Thanks in advance!

    Hampton Roads Most Wanted

    # May 20, 2008 at 5:58 pm

    Looks like you mis-spelled an ID name. In the markup you use "menu-item", but in the CSS you use "menu-items".

    # May 20, 2008 at 6:02 pm


    Easy enough. It’s always the simplest mistake that gets me every time!


    I think I need a break from staring at the monitor.

    Thanks Chris!

    # May 20, 2008 at 7:09 pm

    Really the two ‘divs’ are redundant. You can achieve the same layout with just the UL tag.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.