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)*/
		}