You need to float the h1/img of your logo to the left, and make sure it’s displayed inline-block (as h1 is by default a block level element. I.E it automatically takes up 100% width of the container unless otherwise stated.
Then float the Nav itself (not it’s Li’s) to the right so it sits where you want. After some padding here and there on the elements you can align everything nicely as needed.
If you float li’s they automagically reverse order, so the best bet is to float the container (either the nav or the UL) and then just display them inline.
Make sure to remove the CSS I added for the container_12 – I think you’re using a grid system so you should ignore that part as it’s probably covered in the default stylesheets.
One thing to look out for when floating elements is that the container will collapse unless you use a clearfix. I’ve done a simple one which is overflow: hidden; but there the best one I can recommend is http://nicolasgallagher.com/micro-clearfix-hack/
just a couple of comments:
1) float overrides any display property, so you don’t need to set the h1 to inline-block
2) you can float the li to the left and the ul to the right (although display: inline works just as well for the li) without reversing the order
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".