Its done with positioning in CSS. I never really did FULLY understand positioning in CSS. I was working on my SEOd like Crazy Theme for Wordpress where I wanted to use this trick, and had to get to learning… BarelyFitz made a neat tutorial to learn CSS Positioning that helped me figure it out.

I knew to set my positioning on the menu to absolute, but was running into a problem: My layout was a fixed width, centered on the page.  The menu needed to stay inside my layout, not just stick to the top right of the page… Different screen resolutions will throw this layout completely out of whack… such a long explanation for such an easy fix!

Put the menu div inside another div (in this case my page wrapper) and set the wrappers position to relative.

After reading Smashing Magazines article on CSS Floats I was surprised at how SIMPLE the fix is. Two little words were the key to ending my frustration. overflow:auto. remember them well.

Here’s example code for ending your float woes:

Build your columns inside of a container and assign the overflow to auto…

<div style="overflow:auto;">
<div style="float:left;">left</div>
<div style="float:right;">right</div>
</div>
<div style="border:1px solid #cccccc;">footer</div>

Heres the result:

And with little extra styling:

<div style="background: #555555 none repeat scroll 0% 0%; overflow: auto; width: 100%;">
<div style="padding: 1%; background: #cccccc none repeat scroll 0% 0%; float: left; width: 86%;">
       Left
 
       Content</div>
<div style="padding: 1%; float: right; width: 10%;">
       Right</div>
</div>
<div style="background: #333333; color: white; text-align: center;">
   footer</div>

Heres the result:

Happy CSSing!