2

Both the logo and navigation are in a header div and I'd like to have the logo centered while the navigation is aligned to the right.

I've tried doing display:block and margin: auto for the image which gets it centered, but then it pushes the navigation down to the next line.

Current css is: 

.logo {
    display: inline-block;
    width: 400px
    margin: 0 auto;
}

/* Navigation */

#nav {
    display: inline-block;
    margin: auto; 
    padding:0; 
    list-style:none;
    float: right;
}

Read that I had to put width in to make margin:auto work but all it does is enlarges the image. Thanks.

toandang
  • 109
  • 1
  • 3
  • 11
  • Would help greatly to post an image of what you were looking for (can link it through min.us or something of the like) – Dave Feb 29 '12 at 15:31

1 Answers1

1

Remove float from your #nav & define text-align:center to it's parent. Write like this:

.header{
 text-align:center;
}
.logo {
    display: inline-block;
    width: 400px
}

/* Navigation */

#nav {
    display: inline-block;
    padding:0; 
    list-style:none;
    text-align:left;
}
sandeep
  • 91,313
  • 23
  • 137
  • 155