PDA

View Full Version : Horizontally aligning 2 divs.


gigiloumill
04-03-2012, 02:23 AM
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/samPHPweb/web/playing.php?buster=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
04-12-2012, 06:07 AM
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
:D

jmichae3
04-24-2012, 01:43 AM
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.