Left Column Issue with Fixed Layout #3.1

[tennisguywill]

1) Script Title:
CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)

2) Script URL (on DD):
http://www.dynamicdrive.com/style/layouts/category/C12/

3) Describe problem:

When I inserted the CSS the left column was not visible:

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -839px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;

To correct this I changed the margin-left from -840 to -839.


Can anyone explain this to me and if making changes like that will be a problem later on that I do not see.

Are there certain things in the CSS you should never change to maintain the integrity of the code?

I'm a newbie to CSS and I'm sure someone else will find this helpful?

Thanks,

Will

[mburt]

When your margins are negative, they quite literally go off the page. So obviously it won't be visible. Change it to:

margin:0px or something to that affect.

[tennisguywill]

After changing column colors and changing the center column color to white; now there is a 1px white line running down the outside edge of the left column. How can I fix that? Thanks for your help.
Here is my CSS:
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
background-color:white;
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #D0D0D0;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
background-color: #D0D0D0;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/;
margin-left: -839px; /*Set margin to that of -(MainContainerWidth)*/;
background: #B7B7B7;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #B7B7B7;
}

#footer{
clear: left;
width: 100%;
background: 999999;
color: #999999;
text-align: center;
padding: 4px 0;
background-color: #999999;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}