I have done a web page with a 2 column layout for the content, each with borders, but are not joining together, but leaving a small gap. I know this is to do with my margin %, but if I make them add to 100%, then the 2nd column drops down. Looked around the net, but seem to be asking the wrong questions!!

Any help appreciated.

My html:
Code HTML4Strict:
 <div id = "content">
 
        	<div id = "aboutleft">
 
            </div>
 
            <div id = "aboutright">
            	<p class = "style3"> P..... Writer/Director </p>
 
                <p>&nbsp;</p>
 
                <p>Peter i...............................</p>
 
            </div>
 
        </div>

My CSS:
Code CSS:
#content {
	background-color: #11190f;
	width: 80%;
	margin: auto;
}
#aboutleft {
	float: left;
	width: 49%;
	background-image: url(images/ptn.jpg);
	background-repeat: no-repeat;
	background-position: center;
	height: 181px;
	background-color: #11190f;
	border-top: 1px solid #54776a;
	border-left: 1px solid #54776a;
	border-bottom: 1px solid #54776a;	
}
 
#aboutright {
	float: right;
	width: 50%;
	height: 181px;
	margin: 0;
	background-color: #11190f;
	color: #fff;
	border-top: 1px solid #54776a;
	border-right: 1px solid #54776a;
	border-bottom: 1px solid #54776a;
 
}

The link is About Peter T Nathan

Thanks,
Vicki