Border Problem

[Parrot40]

Can someone please help me in solving this border issue?

The code:

#right-col {
float: left;
width: 250px;
/*Width of right column in pixels*/
margin-left: -250px;
/*Set left margin to -(RightColumnWidth) */
background: #0099FF;
}


when the background: #0099FF is removed and the following code is added:
border-left: 1px dotted #000;

causes the right column to be removed from the page.

The page is fine with the background in the #right-col but screws up when the border-left is added.

Here is the whole css


* {margin:0;padding:0}


.clear {clear: both;}


h1 {
font-family: arial;
font-size: 200%;
margin: 25px 0 10px 0;
}


h2 {
font-family: arial;
font-size: 100%;
margin-top: 10px;
}


h3 {
font-family: arial;
font-size: 75%;
margin-top: 10px;
}


h4 {
font-family: arial;
font-size: 50%;
margin-top: 10px;
}


p {
font-family: helvetica, san-serif;
text-align: justify;
font-size: 85%;
}


.floatright {
float: right;
margin: 5px 0 5px 20px;
}

.dropcap
{
float: left;
width: .7em;
font-size: 4em;
line-height: 80%;
padding-top: 4px;
}


a {
}


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



#header {
background: #0099FF;
height: 150px;
/*Height of top section*/
}


#header h1 {
font-size: 200%;
top: 0;
margin: 0;
padding: 20px;
}


#navcontainer ul {
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}


#navcontainer ul li {
display: inline;
}


#navcontainer ul li a {
padding: 0.2em 1.4em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
outline: none;
}


#navcontainer ul li a:hover {
background-color: #0099FF;
color: #fff;
}


#navcontainer ul li a:active {
background-color: #0099FF;
color: #fff;
}


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



#main-col {
margin-right: 250px;
/*Set right margin to RightColumnWidth*/
}


#right-col {
float: left;
width: 250px;
/*Width of right column in pixels*/
margin-left: -250px;
/*Set left margin to -(RightColumnWidth) */
background: #0099FF;
}


#footer {
clear: left;
width: 100%;
height: 20px;
background: #036;
color: #FFF;
padding: 8px 0;
bottom:0;
}


#footer p {
text-align: center;
color: white;
font-family: arial, helvetica, sans-serif;
font-size: 75%;
}



#footernav ul {
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
text-align: center;
width: 100%;
font-family: arial, helvetica, sans-serif;
}


#footernav ul li {
display: inline;
}


#footernav ul li a {
padding: 0.2em 1.4em;
background-color: #036;
color: White;
font-size: 75%;
text-decoration: none;
text-align: center;
vertical-align: middle;
outline: none;
}


#footernav ul li a:hover {
color: #0099FF;
}


#footernav ul li a:active {
color: #0099FF;
}




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