Border on 2 columns not working

HTML & CSS
1

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:

 <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:

#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

2

You can’t mix px and % like that. What I would recommend is to have a wrapper with that border on it, and then inside that place a left and right div with % widths.

3

Hi,

You could do it like this without using extra wrappers.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#content {
	background: #11190f;
	width: 80%;
	margin: auto;
}
#aboutleft {
	float: left;
	width: 50%;
	background:#11190f url(images/ptn.jpg) no-repeat 50%;
	border: 1px solid #54776a;
	overflow:hidden;
	margin-right:-1px;
	color: #fff;
	min-height:181px;
}
* html #aboutleft{margin-right:-4px}/* ie6 3 pixel jog*/
#aboutright {
	background: #11190f;
	color: #fff;
	border: 1px solid #54776a;
	overflow:hidden;
	zoom:1.0;
	min-height:181px;
}
</style>
</head>
<body>
<div id="content">
	<div id="aboutleft">
		<p>left content</p>
		<p>left content</p>
		<p>left content</p>
		<p>left content</p>
	</div>
	<div id="aboutright">
		<p class = "style3"> P..... Writer/Director </p>
		<p>Peter i...............................</p>
		<p>Right content</p>
		<p>right content</p>
	</div>
</div>
</body>
</html>
4

Thank you for your help. I got it to work on my 2 column and on a 3 column where I had the same problem. I can now stop pulling my hair out.

Vicki