logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 04-03-2012, 01:23 AM   #1
gigiloumill
gigiloumill's Avatar
 
Join Date: Apr 2009
Location: Miami, FL
Posts: 493
Default Horizontally aligning 2 divs.

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.

Code:
<!-- 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 -->
Code:
/************************************************************************
 * 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;
}
__________________
Keeping your business connected.
www.starionmedia.com
gigiloumill is offline   Reply With Quote
Old 04-12-2012, 05:07 AM   #2
moviemastersdk
 
Join Date: Dec 2011
Posts: 33
Default

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

Last edited by moviemastersdk; 04-12-2012 at 05:10 AM..
moviemastersdk is offline   Reply With Quote
Old 04-24-2012, 12:43 AM   #3
jmichae3
 
Join Date: Dec 2010
Posts: 366
Default

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.
__________________
------------
Jim Michaels
HTML Code:
improperly<strong>nested<em>elements</strong>cause</em>
browser confusion (I believe the term is 'tag soup')!
jmichae3 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:11 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com