Problem med DIVar

Jag har en DIV där jag har mitt innehåll i. I denna DIV har jag ytterligare två DIVar som jag har placerade som två kolumner bredvid varandra. Nu får jag inte till placeringen av den högra (röd i bifogade bilden). Den röda placeras fel vertikalt med ca 50 pixlar för lågt. Några förslag på hur man löser detta?

HTML:

<div id="content">
			<div id="content_inline_left">
				<p class="heading1">Rubrik</p>
				<p class="breadtext">Test</p>
			</div>
			<div id="content_inline_right">
				<p class="heading1">Bilder</p>
			</div>
		</div>

CSS:

#content
{
	position: relative;
	top: 3px;
	left: 1px;
	width: 770px;
	height: 600px;
	border: #FFFFFF outset 1px;
	background-color: #D0D0D0;
	padding: 20px 5px 5px 10px;
}

#content_inline_left
{
	position: relative;
	top: 0px;
	left: 0px;
	width: 520px;
	height: auto;
	border: #000000 dashed 1px;
	background-color: #D0D0D0;
	padding: 0px 10px 0px 0px;
}

#content_inline_right
{
	position: relative;
	top: 0px;
	left: 540px;
	width: 100px;
	height: auto;
	border: #000000 dashed 0px;
	background-color: #FF0000;
	padding: 0px 0px 0px 0px;
}