More Fun With CSS - (omg its difficult)

Question

First I want to say thank you to everyone that has been helping learn css and all the power that it has.
Now this is a two part question.
Part 1.
(div.header-shadow)
I have a div tag that I inserted a very important image into.  The image includes som text that I thought I would be able to place hotspots over and make links out of them.  Well you guessed it I am unable to place hotspots over the text on the image.
Part 2.
(div.about-column1 and div.about-column)
I have a second area that has two columns in it what I would like to do is make the two columns into a single column that uses all of the space but only for this one page. Well when I try to delete one column and extend the width of the remaining column the change takes place on every page that I have setup with the two column theme.
Now to make sure things are clear I am working from a prebuilt template and trying to make modifications to it so that it fits my needs.
and here is the css if needed
body {
    background-image: url(images/main-bg.jpg);
    background-repeat: repeat-x;
    background-color: #040404;
    margin: 0;
    padding: 0;
    font-size: 11px;
    color: #CCC;
    font-family: Arial, Helvetica, sans-serif;
img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
#container {
    width: 1000px;
    margin: 0 auto;
.top-logo {
    height: 91px;
    padding: 0 0 0 27px;
    width: 263px;
    float: left;
    margin: 0 0 29px 0;
.header {
    height: 305px;
    width: 849px;
    margin: 0 0 0 76px;
    background-image: url(images/main_img.png);
    background-repeat: no-repeat;
    padding: 36px 0 0 0;
.header-corner {
    background-image: url(images/header-corner.gif);
    width: 11px;
    height: 269px;
    float: right;
.header-content {
    margin: 0px;
    padding: 29px 0 0 10px;
    float: left;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    width: 488px;
.header-shadow {
    background-image: url(images/header-shadow.gif);
    height: 39px;
    width: 849px;
.button-go {
    float: right;
    margin: 10px 0 0 0;
#content {
    margin: 0 0 30px 0;
    padding: 20px 20px 0 45px;
.about-column1 h1 {
    font-family: Headache;
    font-size: 28px;
    color: #FFF;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    padding: 0px;
.footer-content {
    width: 955px;
    margin: 0 auto;
    padding: 15px 0 0 45px;
.footer-copyright {
    float: left;
    padding: 13px 0 0 0;
.footer-icon {
    float: left;
.content-img {
    margin: 0 10px 20px 0;
    padding: 0px;
    width: 110px;
    float: left;
.footer-icon ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
.footer-icon li {
    margin: 0px;
    padding: 0 2px 0 0;
    display: inline;
.content-column {
    width: 270px;
    margin: 0 55px 0 0;
    float: left;
.content-column01 {
    width: 265px;
    margin: 0 0px 0 0;
    float: left;
.content-column h1 {
    font-family: Headache;
    font-size: 28px;
    color: #FFF;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    padding: 0px;
.content-column01 h1 {
    font-family: Headache;
    font-size: 28px;
    color: #FFF;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    padding: 0px;
.about-column {
    float: right;
    width: 418px;
.about-column h1 {
    font-family: Headache;
    font-size: 28px;
    color: #FFF;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    padding: 0px;
.about-column1 {
    float: left;
    width: 400px;
.about-column1 ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
    background-image: url(images/icon-arrow.gif);
    background-repeat: no-repeat;
    background-position: left 3px;
.about-column1 li {
    background-image: url(images/icon-arrow.gif);
    background-repeat: no-repeat;
    background-position: left 5px;
    padding: 0 0 0 14px;
    line-height: 18px;
.about-pix {
    margin: 0 10px 0 0;
    padding: 0px;
    float: left;
    height: 134px;
    width: 241px;
.header-txt {
    background-image: url(images/header-bg.gif);
    height: 269px;
    background-repeat: repeat-x;
    margin: 0px 0 0 332px;
.clearboth {
    clear: both;
.top-nav {
    width: 595px;
    float: right;
    margin: 36px 0 0 0;
.top-nav ul  {
    margin: 0px;
    padding: 0px;
.top-nav li  {
    display: inline;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
.footer {
    background-image: url(images/footer-bg.gif);
    height: 95px;
.txt-link {
    font-family: Headache;
    font-size: 12px;
    font-weight: normal;
    color: #FFF;
h1 {
    font-family: Headache;
    font-size: 28px;
    color: #FFF;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    padding: 0px;
.contact-img {
    float: left;
    height: 137px;
    width: 140px;
    margin: 0 20px 0 0;
.txt-blank {
    color: #000;
.contact-column {
    float: left;
    width: 750px;
.contact-column ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
.form{
    padding: o;
    margin: 0;
div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
    width: 400px; /*width of form rows*/
    overflow: hidden;
    padding: 0;
    margin: 0;
    height: auto;
div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
    float: left;
    width: 80px;
    margin-right: 15px; /*spacing with right column*/
div.thefield ul {
    margin: 0px;
    padding: 0px;
div.thefield li {
    display: inline;
    list-style-type: none;
    margin: 0px;
    padding: 0 6px 0 0;
div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
    float: left;
    margin-bottom: 10px; /* space following the field */
div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
    width: 230px;
div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
    width: 229px;
    height: 100px;
div.fieldwrapper div.thebig textarea {
    width: 400px;
    height: 100px;
div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
    width: 379px;
    text-align: left;
.contact-column li {
    background-image: url(images/icon-arrow.gif);
    background-repeat: no-repeat;
    background-position: left 5px;
    padding: 0 0 0 14px;
    line-height: 18px;
Thanks for the help

Answer 1

Thanks i did not even pay attention to the fact that the img was in the background even though it says so right in the css, to close to the project.  The style sheet was what I was thinking, but what I should have asked is "How do should the style sheet for what I want to do with the columns be written?" This is what I should have asked. I know I should start it with something like:
<style type="text/css">
    --------------------------and after this is where it gets fuzzy or nonexsistent--------------------------------------
because is it the div#container, or div#content, or the div.about-column1 or div.about-column that this style sheet is to be written for, I have no idea?
So if someone could show me how this style sheet should be written I would be greatful.