Exapand menu image and aligning sidebars

Question

I have a menu on my website which I created using CSS. I
would like the menu background image to expand to match the text on
the menu. Please have a look at the website: www.tusptest.com.
On another note, I have used sidebars on my Css and they do
not align. I have tried the faux column technique but I seem to be
getting it wrong and have not managed to align the sidebars. Is
there any other way of doing it.
hereis the link to the website: www.tusptest.com
CSS Code:
/* global */
html{height: 100%;}
body
font-family: arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: 0.78em;
p
margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
h1
{ font-family: serif;
font-size: 108%;
letter-spacing: .1em;
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
letter-spacing: .1em;
font-weight: normal;
text-decoration: underline;
img{border: 0px;}
a{outline: none;}
/* image positioning - left, right and center */
.left
{ float: left;
padding: 0px 8px 0px 0px;
.right
{ float: right;
padding: 0px 0px 0px 8px;
.center
{ display: block;
text-align: center;
margin: 0 auto;
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px;
padding: 10px 20px 0px 20px;
border-left: 8px solid;
/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
padding: 0px;
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
padding: 0px;
ol li
{ margin: 0px 0px 11px 0px;
padding: 0px;
/* margin lefts / margin rights - to centre content */
#main, #links, #footer, #logo, #menu, #content
{ margin-left: auto;
margin-right: auto;
/* main container */
#main{
width: 850px
/* header */
#header
{ width: 100%;
height: 87px;
/* logo */
#logo
padding: 1;
float: left;
margin: -15px 15px 0px 15px;
#address
{ padding: 11px 17px 0px 14px;
float: right;
text-align: right;
#address p
{ padding: 0px;
margin: 0px;
#logo h1
{ font-family: verdana, arial, sans-serif;
margin: 0px;
padding: 18px 0px 0px 0px;
font-size: 160%;
letter-spacing: .3em;
#logo h2
{ font-family: verdana, arial, sans-serif;
margin: 0px;
padding: 5px 0px 0px 0px;
font-size: 100%;
letter-spacing: .2em;
/* navigation menu */
#menu{margin: 0px 15px 0px 15px;}
#menu ul
{ height: 38px;
margin: 0px auto;
#menu li
float: right;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
#menu li a, #menu li a#selected, #menu li a:hover
font-family: verdana, arial, sans-serif;
display: block;
float: left;
height: 7px;
text-decoration: none;
margin: 5px 12px 0px 4px;
padding: 7px;
text-transform: uppercase;
font-size: 80%;
#links
{ float: right;
width: 100px;
text-align: right;
padding: 0px 18px 0px 0px;
/* sidebars */
.sidebar
float: left;
width: 220px;
padding-top: 16px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
/* sidebar items / links */
.sidebaritem
text-align: left;
width: 200px;
float: right;
margin: 0px 11px 9px 0px;
padding: 0px 0px 0px 0px;
.sidebaritem h1, .sidebaritem h2, .sidebaritem p{margin: 0px
10px 0px 10px}
.sidebaritem h1
{ font-weight: normal; padding: 8px 0px 16px 0px;
text-transform: uppercase;
.sidebaritem p
line-height: 16px;
padding: 0px 0px 8px 0px;
.sidebaritem a, .sidebaritem a:hover
{ padding: 0px 0px 2px 14px;
text-decoration: none;
.sbilinks ul{margin: 0px 0px 18px 10px;}
.sbilinks li
{ list-style: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 5px 0px;
.sbilinks li a, .sbilinks li a:hover
{ height: 16px;
text-decoration: none;
width: 149px;
/* page content (centre) */
#content
text-align: justify;
width: 355px;
margin-top: 16px;
float: left;
padding-top: 11px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: -1px;
#content h1
{ font-family: arial, sans-serif;
margin: 5px 0px 12px 0px;
font-size: 128%;
font-weight: normal;
text-transform: uppercase;
#content a, #content a:hover
{ padding: 0px 0px 2px 0px;
text-decoration: none;
/* footer */
#footer
{ height: 44px;
padding: 18px 0px 4px 0px;
font-size: 80%;
text-transform: uppercase;
font-family: verdana, arial, sans-serif;
clear: both;
text-align: center;
border-top: 2px solid;
margin: 4px 15px 4px 15px;
#footer a
{ text-decoration: none;
padding: 0px 0px 2px 0px;
border-bottom: 1px dashed;
#footer a:hover
{ text-decoration: none;
padding: 0px 0px 2px 0px;
border-bottom: 1px solid;
/* Based on Nifty Corners: rounded corners without images */
/* By Alessandro Fulciniti */
http://www.html.it/articoli/nifty/index.html
.rtop, .rbottom, .mtop, .mbottom{display: block;}
.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4,
.mtop .m1, .mtop .m2, .mtop .m3, .mtop .m4,
.mbottom .m1, .mbottom .m2, .mbottom .m3, .mbottom .m4
{ display: block;
height: 1px;
overflow: hidden;
.r1, .m1{margin: 0 5px}
.r2, .m2{margin: 0 3px}
.r3, .m3{margin: 0 2px}
.rtop .r4, .rbottom .r4, .mtop .m4, .mbottom .m4
{ margin: 0 1px;
height: 2px
#main .sidebar .sidebaritem {
background-color: #F3F9EE;
#main #content .sidebaritem {
background-color: #F3F9EE;
#main .sidebar #right_sidebar2 {
background-color: #FFFFFF;

Answer 1

Hi Beau:
That particular graphic will be hard to work with because
it's "tilt" will
require a lot of screen space.
{IMHO, it's a bit crude and "comic bookish" for the look you
have otherwise
designed).
With a more right-angled image, you can insert a 3 row x 3
column table (9
cells) in that container, and slice your image into four
square corner
images, and small tiling background images for the top, sides
& bottom.
The center cell will contain only your content and will
expand as needed.
"beau123" <[email protected]> wrote in
message
news:fhs2t4$3pl$[email protected]..
> please can someone help