Yesterday I decided that I wanted to change the look of this weblog to something a bit different from the standard. Nothing much, you understand - I just wanted to put the navigation on the right rather than on the left.
Simple, I thought. Float the content left, the menu right, and that should be it. I should be so lucky!
Then I tried absolutely positioning the menu to the right. This worked fine in IE 6, but in Mozilla 1.4 it left a gap above the menu block (between the banner and the menu).
Fine, that was simple enough. I could absolutely position the menu instead, positioning the top to 0 as well as the right edge of the menu. That looked OK, except to position the menu in the right place required another div as a wrapper around both the content and the menu.
So, can anyone see what I’ve been doing wrong, or advise as the best way of doing this? I don’t like to absolutely position the menu as it needs a pointless div added to the code. So many sites show how to do 3 column layouts, but 2 column layouts with the menu on the right are much less common.
A decent design will follow, but for the time being this’ll have to do…
1 comment so far ↓
My site has the menu on the right using float:right and the content on the left using float:left. Head over to Glish.com for an example of two column layout or check out alistapart.
Leave a Comment