Basic CSS layout problem

[AppleMatt]

So I've mucked up my CSS a bit, and need some really basic help. Basically I've got a "content" area and a "menu" area, but they're not working.

What I'd like is the simplest piece of CSS which will allow me to have the following (quick run-through - see image for what I mean);
1) The overall box is centered.
2) The top of the box is the top of the page
3) There is a gap between the bottom of the box and the edge of the page.

All the templates and examples I've tried from various sites are far too complex, including bits for everything and anything you might want to add. So...what's the simplest way to achieve this? With the menu I have at the moment, I've defined it's position in the stylesheet. I'd prefer to just style the links and have the position taken care of by the layout. Also, how would I tell a small image to always be in the bottom right of the box?

Help? 🙁

AppleMatt

 

[jim.]

ok, let's dust off the css skills:

div.pos {
margin: 0 auto 2em auto;
}

.pos .container {
float:left;
border: 1px solid black;
width: (You may want to specify a total width here);
}

.container .menu {
float:left;
width:X%; (Desired width either relative or absolute)
margin:0;
}

.container .content {
float:left;
width:Y%;
border-left: 1px solid black;
background: url(/path/to/Image) bottom right no-repeat;
margin:0;
}

Perhaps this will work? The container div must also float if you want your menu and content divs to be uniform size when changing with content. You can predefine a height and get rid of the position div. The position div merely keeps the stuff centered. I put the image in the background so it will always be in the lower right corner. Your html will be somthing like this:

<div class="pos">
<div class="container">
<div class="menu">
<ul>blah blah</ul>
</div>
<div class="content">
blah blah
</div>
</div>
</div>


Jim