Horizontally aligning 2 divs.

[gigiloumill]

Guys, I have a dilemma. I just can't get these two divs to align side by side. Here's a link to my problem: http://span.spanglish101.fm/samPHPwe...er=02091710641

I need to put "player" to the left of "recently_played". Does anyone have any idea how I can do this? Here's the actual code. Thanks.

<!-- BEGIN:RECENTLY PLAYED -->
			<div id="recently_played_wrapper">
             
				<div id="recently_played">
					<table cellpadding="0" cellspacing="0">
						<thead>
							<tr>
								<th colspan="2" align="left">
									Recently Played
								</th>
								<th class="links" align="center">
									Links
								</th>
								<th align="left">
									Album
								</th>
								<th align="right">
									Time
								</th>
							</tr>
						</thead>
						<tbody>
						<?php foreach ($recentSongs as $key => $recentSong): ?>
							<tr>
								<td>
									<?php if(SHOW_PICTURES && !empty($recentSong->picture)) : ?>
									<a href="<?php echo $recentSong->buycd; ?>" target="_blank">
										
									</a>
									<?php endif; ?>
								</td>

								<td>
									<?php echo $recentSong->artist_title; ?>
									<?php if ($recentSong->isRequested): ?>
									~requested~
									<?php endif; ?>
								</td>
								<td align="center">
									<a href="<?php echo $recentSong->buycd; ?>" target="_blank">
										<img src="images/buy.png" alt="Buy this CD now!" title="Buy this CD now!" />
									</a>
									
									
								</td>

								<td>
									<?php echo $recentSong->album; ?>
								</td>
								<td align="right">
									<?php echo $recentSong->durationDisplay; ?>
								</td>
							</tr>
						<?php endforeach; ?>
						</tbody>
					</table>
				</div>
                <div id="player">Content for  class "player" Goes Here</div>
                
			</div>
			<!-- END:RECENTLY PLAYED -->

/************************************************************************
 * GLOBAL STYLES:
 * .body:
 *   background-color: Global background color
 *   color: Global text color
 *   font-*: Global font size and family
 ************************************************************************/
body {
	margin: 0px;
	/*background-image: url("../images/o.png") repeat-y center top scroll; // Uncomment and replace this with a similar image */
	background-color: #78CCEB;
	color: #666666;
	font-size: 10px;
	font-family: "Tahoma",sans-serif;
}

a { text-decoration: none; color: #3B5998; }
a:hover { text-decoration: none; color: #3B5998; }

/*************************************************************************
 * PAGE STYLES:
 * #page:
 *   background-color: Background color of the page DIV
 *   border-*: Border on either side of the page, used with .body background-image
 *   margin-top: Blank space at the top of the page
 *   margin-left, margin-right: Aligns the page DIV in the center
 *   padding: Pads the page with the given size
 *   width: Size of the page DIV
 *
 *************************************************************************/
#page {
	background-color: white;

	min-height: 500px;
	float:left;
	border-left: 0px solid #666666;
	border-right: 0px solid #666666;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10;
	margin-right: 10;
	padding: 10px;
	width: 860px;
}


/************************************************************************
 * RECENTLY PLAYED:
 *
 *
 *
 ************************************************************************/
#recently_played_wrapper {
	width: 500px;
	float:right;
	clear:both;
	margin-top: 0px;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	clear: none;
}

#recently_played {
	background: #6699CC;
	padding-top: 10px;
	padding-bottom: 10px;
	
}

#recently_played table {
	background: transparent;
	border-spacing: 0px;
	width: 100%;
}

#recently_played table th {
	padding-bottom: 10px;
}

#recently_played table thead tr {
	font-size: 14px;
	font-weight: bold;
	background: #6699CC;
	color: white;
}

#recently_played table tbody tr {
	color: #5F5C57;
	font-weight: bold;
	font-size: 12px;
	overflow: hidden;
	height: 60px;
}

#recently_played table td,
#recently_played table th {
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
}

.recently_played_odd {
	background-color: #F0F0F0;
	border-spacing: 0px;
	border-collapse: collapse;
}

.recently_played_even {
	background-color: #DADADA;
	border-spacing: 0px;
	border-collapse: collapse;
}

#recently_played table img {
	border: 0px;
}

.rpPicture {
	display: none;
}
/************************************************************************
 * PLAYER:
 *
 *
 *
 ************************************************************************/


#player {
	height:300px;
	float: left;
	width: 300px;
	margin-top:-300px;
	margin-left: -350px;
	background-color: #9cf;
	color: #000;
	padding-top: 0%;
	padding-right: 1%;
	padding-bottom: 1%;
	padding-left: 1%;
}

/************************************************************************
 * FOOTER STYLES:
 *
 *
 *
 ************************************************************************/
#footer {
	width: 100%;
	margin-top: 50px;
	padding-top: 10px;

	border-top: 1px solid black;
	clear: both;
	text-align: center;
}

.error {
	border: 1px solid red;
	padding: 10px;
	background: #FFEEEE;
	margin: 10px;
}

.success {
	border: 1px solid green;
	padding: 10px;
	background: #EEFFEE;
	margin: 10px;
}

[moviemastersdk]

Use float:left; For the two divs you want side by side
They should both be float left, and try giving them a fixed width, so you're sure they fit in the wrapping div

Btw I see that you used align:left and align:right
Align only changes how the content of the div is positioned

Hope it helps

[jmichae3]

yes, and anytyhing you want after that which should be on a new line should have a clear:both (I usually use a br element for that)

in fact, I use float:left for making nice colored boxes around forms.