Re: inline-block vs. float

[wolfcry911]

My example, as mentioned, did not include the shiv for IE. Do me a favor and add this little bit to that page between the footer a style in the head and the closing head tag:

footer a {

text-decoration: none;

color: #000;

}



article, aside, figure, footer, header, hgroup,

menu, nav, section { display: block; } /* defaults for html5 elements */

This will correct IE6, 7, and 8 as well adjust older Firefox, etc. That’s it – that’s all that’s needed!

Now back to your page…
You really don’t need to center the menu. What you need is to have it start 10px from the left to compensate for the shadow. Simply put a left and right margin on #mainnav #mainnav { margin: 0 10px; } /* <-- shorthand! */
You've already discovered the padding problems so all that remains is the vertical positioning of nav. There are a couple ways of approaching it. I personally like the way I used in my example (using absolute positioning of the nav and floating the anchors within). That had the nav inside the header and was positioned to the bottom of the header. Your current float code has the nav outside of the header, so you could position it in relation to the body, or use a negative top margin to pull it up - either will work. Try the negative top margin, so now the #mainnav margin looks like
#mainnav { margin: -30px 10px 0; } /* <-- more shorthand! */
So, to fix all the problems with the float page, all I had to do was change height of header to 126px and its padding to 20px 15px 0; add margin of -30px 10px 0 to #mainnav, and add 1px padding to #content. Sure beats re-doing the entire page with a different method ;)