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;
}

Lägg in float:left; så borde det funka...

I vilken av Divarna, den högra eller vänstra? :)

Båda

Alltså, släng in typ position: absolute; i båda divarna. den vänstra placerar du på left: 0; och top: 0;, och den andra på right: 0; och top: 0;

Utan att veta dina planer så tror jag att absolut positionering som föreslogs ovan skulle ställa till ifall du skulle välja att bygga vidare på sidan. Speciellt om du skulle välja att använda dynamiska bredder på kolumnerna, därför är nog lättast att bara sätta

#content_inline_left {
float: left;
}

På så sätt så kommer den placerar så långt åt vänster som content-divven tillåter, samt att den högra tillåts placeras bredvid den vänstra ifall det finns utrymme (vilket finns på din skiss).

Tack för svaret. Det fungerade bra när jag gjorde som du sa! :)