There's probably a lot more you want that you're not mentioning, but in the most basic terms, things flow top to bottom naturally. To get things to display side by side you can "float" elements (though that's not the only way).

If you have any design sense you'll come back and say things like "but I want the menu to be as tall as the content" and "I want a footer at the bottom of the screen no matter how tall the page is" and that's where you get into the more complicated stuff. But the above is the basic shell of what you're talking about.

I wouldn't say it "doesn't work", you're just simply noticing the things that aren't there you didn't ask for. Coming from frames, if I had told you everything you needed for a bulletproof CSS design, your head would have exploded.

When you float something, other content will wrap around it. You can stop that by either setting a margin on that content, or by setting the content to overflow: hidden or auto.

If you add overflow: hidden to your content CSS, it will no longer wrap underneath the menu. (Cue your next complaint that the menu and content aren't the same height in 5...4...)