body { margin: 17px 0; font: 77% Arial, Helvetica, sans-serif; color: #FFF; background: #000; text-align: center; } /* a

title is important and should be used in each HTML document. However it's not used here and so I set it to display: none */ h1 { display: none; } #outer { width: 851px; margin: auto; text-align: center; padding-top: 42px; background: url(images/top_corners.gif) no-repeat; color: #FFFFFF; text-decoration: none; vertical-align: middle; } #inner { padding: 0 54px 56px 54px; background: url(images/bottom_corners.gif) no-repeat bottom; } /* add the gradient background image itself in the HTML page */ #main { border: 2px solid #FFF; background-repeat: repeat-x; background-position: bottom; } .content { float: left; width: 443px; margin: 10px 10px 0 0; padding-left: 15px; background-image: url(images/contact-content.jpg); } .indexcontent { float: left; width: 427px; margin: 10px 10px 0 0; padding-left: 15px; padding-right: 15px; background-color: #000000; } .newsdetailcontent { float: left; width: 427px; margin: 10px 10px 0 0; padding-left: 15px; padding-right: 15px; } .sitemap { float: left; width: 427px; margin: 10px 10px 0 0; padding-left: 15px; padding-right: 15px; } .gigscontent { float: left; width: 433px; margin: 10px 10px 0 0; padding-left: 15px; /*background-image: url(images/gigs-content.jpg);*/ padding-right: 10px; background-repeat: no-repeat; background-position: bottom; background-color: #3a5135; } .gallerycontent { float: left; width: 714px; margin: 10px 10px 0 0; padding-left: 15px; background-image: ; } .musiccontent { float: left; width: 443px; margin: 10px 10px 0 0; padding-left: 15px; background-image: url(images/music-content.jpg); background-repeat: no-repeat; background-position: center top; background-color: #010037; } .biogcontent { float: left; width: 443px; margin: 10px 10px 0 0; padding-left: 15px; background-image: url(images/biog-content.jpg); } .downloadscontent { float: left; width: 433px; margin: 10px 10px 0 0; padding-left: 15px; background-image: url(images/downloads-content.jpg); padding-right: 10px; } .merchandisecontent { float: left; width: 443px; margin: 10px 10px 0 0; padding-left: 15px; background-image: url(images/merchandise-content.jpg); } .merchandisetestcontent { float: none; width: 740px; margin: 0px 0px 0 0; padding-left: 0px; vertical-align: middle; background-color: #000000; } .successfulpaymentcontent { float: none; width: 740px; margin: 0px 0px 0 0; padding-left: 0px; vertical-align: middle; background-color: #000000; } .linkscontent { float: left; width: 443px; margin: 10px 10px 0 0; padding-left: 15px; background-image: url(Images/.jpg); background-color: #34254c; } .contactcontent { float: left; width: 443px; margin: 10px 10px 0 0; padding-left: 15px; background-image: url(images/contact-content.jpg); } /* min-height was set here depending on the height of the content background image. IE doesn't understand this and so I linked min-height.js in the HTML . If the content section doesn't need to have variable height you can remove the .js file and the link in the HTML and change "min-height" to "height" */ .content .inside { min-height: 543px; background-repeat: no-repeat; /* add the background image for the content part in the HTML page */ } .rightColumn { float: left; width: 261px; margin-top: 10px; } .rightColumn object { margin-bottom: 12px; padding-bottom: 12px; } .created { float: right; width: 206px; height: 18px; } .clr { clear: both; height: 1px; font-size: 1px; }