Hi there,
A simple way to do this, since you have only 2 columns is to use the float command.
For your menu element you can write:
#menu {
float: left;
width: 100px;
margin: 0px 10px 0px 0px;
}
you don't need to declare a height, it will auto extend depending on your content, useful if you want to add more in stuff in below it.
for the content/ 2nd column you can write:
#content {
float: right;
width: 400px;
}
This should mean that your menu will appear on the far left of your screen and the content appears on the far right of your screen.
To make this display properly you make a container layer which has the 2 elements inside it. this means that the menu item will go to the far left of the inside of the container and the content column will go to the far right inside of the container.
#container {
width: 510px;
}
Hope that helps you out, I've posted this as an example below:
<html>
<style type="text/css">
<!--
#container {
width: 512px;
border: 1px Solid #000;
}
#menu {
float: left;
width: 100px;
background-color: #CCC;
margin: 0px 10px 0px 0px;
}
#content {
float: right;
width: 400px;
background-color: #EEE;
}
-->
</style>
<body>
<div id="container">
<div id="menu">
some text here
</div>
<div id="content">
blah blah blah
</div>
</div>
</body>
</html>
if in doubt a good reference point for CSS (and most web things) is at:
http://www.w3schools.com/css/default.asp
give us a shout if you don't understand.
Cheers,
pete.