using images instead of borders in CSS - 2 column layout

[Lorel]

I'm trying to set up a 2 column design that works in Tables into CSS with each column using images instead of borders, i.e., one image for the top (rounded corners), one for the middle that repeats down the page and another for the bottom image (rounded corners).

I've tried setting this up in CSS and my images won't even load (i'm using Safari 3.1.1 on the Mac but also tried FF on the Mac). I've tried multiple different tutorials and methods but I haven't found one using images as backgrounds. I suspect I need multiple divs to accomplish this but nothing works.

Any suggestions?

here is the code for the main content div (I'll deal with the other one later).

------------CSS---------

#content {
float: left;
padding: 10px;
background-image: url(images/right-cell_02.jpg);
background-repeat: repeat-y;
background-color:#ffffff;
border-right:200px solid #000000; /* width and color of the leftsidebar */
margin-right:-200px; }

#contenttop {
background-image: #ffffff url(images/content-top.jpg);
background-repeat: no-repeat;
width:750px;
height:40px;

#contentbottom {
background-image: url(/images/right-cell_03.jpg);
background-repeat: no-repeat;
width:750px;
height:40px; }

----------HTML---------

<div id="contenttop"> &nbsp; </div>
<div id="content">The content</div>
<br><br><br><br><br><br><br>
<div id="contentbottom"> &nbsp; </div>

[edited by: Lorel at 7:30 pm (utc) on July 5, 2008]

[Lorel]

I found some errors in my code and changed a few things plus added the left column data. The right column is loading the images for top and bottom but not the middle and only the top column is aligning to the right of the left column. the others are below it.

------CSS_________

#leftsidebar {
background: #0000ff;
width:200px;
height:630px; }

#contenttop {
background-image: url(images/content-top.jpg);
background-repeat: no-repeat;
background-position: top left;
margin:0;
width:750px;
height:40px;}

#content {
padding:10px;
background-image: url(images/content-middle.jpg);
background-repeat: repeat-y;
background:#ffffff;
width:750px;}

#contentbottom {
background-image: url(images/content-bottom.jpg);
background-repeat: no-repeat;
background-position: bottom left;
margin:0;
width:750px;
height:40px; }

.floatleft200 {float:left;
width:200px;}

.floatleft750 {float:left;
width:750px;}

-------HTML--------

<div id="leftsidebar" class="floatleft200">
Links go Here
<br><br><br><br><br>
</div> <br class="clearboth">

<div id="contenttop" class="floatleft750"> &nbsp; </div>
<div id="content" class="floatleft750">The content</div>
<br><br><br><br><br><br><br>
<div id="contentbottom" class="floatleft750"> &nbsp; </div>