DIV layout problem

[peuge]

Hey all,

 

I am having problems with the code below. The left top and left bottom content aligns properly but then the right content goes below the content box and I cant seem to get it in the right content block? Hope this makes sense any help much appreciated.

 

Thanks in advance

 

 

CSS Code

body{
background-color: black;
}
#content{
margin: auto;
background-image: url(logo/background.jpg);
background-repeat: no-repeat;
width: 900px;
height: 393px;
}
#left_content{
width: 268px;
height: 393px;
}
#left_content_top{
color: white;
margin-left: 5px;
width: 268px;
height: 239px;
}

#left_content_bottom{
color: white;
width: 268px;
height: 154px;
}

#right_content{
color: white;
height: 363px;
width: 524px;
}

 

HTML DIV code

<div id="content">
  <div id="left_content">
  <div id="left_content_top">
	  Left_top
	</div>                            <!-- End of Left top Content Div -->

	<div id="left_content_bottom">
	  Left_bottom
	</div>                           <!-- End of left bottom Content Div -->	
</div>                             <!-- End of Left Content Div -->

<div id="right_content">
  Right_all	
</div>                            <!-- End of Right Content Div -->

</div>                              <!-- End of Content Div -->

[dropfaith]

i would use floats

body{
background-color: black;
}
#content{
margin: auto;
background-image: url(logo/background.jpg);
background-repeat: no-repeat;
width: 900px;
height: 393px;
}
#left_content{float:left;
width: 268px;
height: 393px;
}
#left_content_top{
color: white;
margin-left: 5px;
width: 268px;
height: 239px;
}

#left_content_bottom{
color: white;
width: 268px;
height: 154px;
}

#right_content{float:right;
color: white;
height: 363px;
width: 524px;
}