Issues with css button # line - included image

HTML & CSS
1

Hello,
i have a css issue that i cant seem to resolve.
I have css button and a line which should be above the button but its not. the button is designed to pull down a div tag on click which works.
everything works except for the css line…it seem want to appear above another div tag.
any help you can provide would be greatly appreciated.

i included a screenshot for your review:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Simple Slide Panel</title>

	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".btn-slide").click(function(){
				$("#panelcategory").slideToggle("slow");
				$(this).toggleClass("active"); return false;
			});	
		});
	</script>

<style type="text/css">
* {	margin: 0;
	padding: 0;
 }

#spacing
{ 	height: 10px; }
		
.body
{	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;	
	font-style: normal;
	width: 950px;	
	margin: 0 auto;						
}

#panelcategory
{	font: 75%/120% Arial, Helvetica, sans-serif;
	background: #edd000;
	display: none;
}

.slidecategorylink
{	border-top: solid 4px #edd000;
}

.btn-slide {
	-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
	box-shadow:inset 0px 1px 0px 0px #ffec64;
	background-color:#ffec64;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ffec64;
	display:inline-block;
	color:#333333;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffee66;
}
.active
{	background-position: right 12px;	}

div.leftinformation
{	float:left;
	width: 49.5%;
	background: red;
	height: 50px;
}

div.rightinformation
{	float:right;
	width: 49.5%;
	background: green;
	height: 50px;
}
div.test
{	border:4px solid green;
 }

</style>
</head>

<body id="body">

	<div >
		<div class="leftinformation"> col 1 </div>
		<div class="rightinformation">col 2 </div>
	</div>
	
	<div >
		<center>
			<div id="panelcategory">
				you can put content here
				
				<table  cellpadding="0" cellspacing="5">
					<tr>
						<td><input type="checkbox" name="vehicle" value="Bike">Category 1</td>
						<td><input type="checkbox" name="vehicle" value="Bike">Category 2</td>
						<td><input type="checkbox" name="vehicle" value="Bike">Category</td>
						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="vehicle" value="Bike">Category 1</td>
						<td><input type="checkbox" name="vehicle" value="Bike">Category 2</td>
						<td><input type="checkbox" name="vehicle" value="Bike">Category</td>
						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
					</tr>
				</table>	
			</div>
			</center>			
			<center> <p class="slidecategorylink"> <a href="#" class="btn-slide">Project category selection</a></p></center>
	</div>
</body>

</html>
2

One option is to set the div that contains the panelcategory content to clear: both.

3

Thanks for the help ralph.m
your suggestion worked…
Never new or even thought about clear: both
learned something new…

thanks again