Need help to align divs

**Ray_don** · 06-06-2011 12:08 PM

PROBLEM SOLVED

I'm trying to align some of divs placed at the bottom (ckeck images) the ones with the prices,
but they wont align
The css rule that affects is the .psdg-bottom-cell
the html

HTML Code:

<div id="psdgraphics-com-table">

<div id="psdg-header">
<span class="psdg-bold">Internet Marketing Services Packs</span><br />
Compare our prices and discounts applied
</div>

<div id="psdg-top">
<div class="psdg-top-cell" style="width:129px; text-align:left; padding-left: 24px;color:#000;">Services</div>
<div class="psdg-top-cell">Silver Pack</div>
<div class="psdg-top-cell">Gold Pack</div>
<div class="psdg-top-cell">Titanium Pack</div>
<div class="psdg-top-cell" style="border:ne;">Diamond Pack</div>
</div>

<div id="psdg-middle">

<div class="psdg-left">Onsite Optimization</div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">Keyword Research</div>
<div class="psdg-right">2 Keywords</div>
<div class="psdg-right">5 Keywords</div>
<div class="psdg-right">10 Keywords</div>
<div class="psdg-right">15 Keywords</div>

<div class="psdg-left">Google Analytics</div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>


<div class="psdg-left">Webmaster's Tools</div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">Competitors Analysis</div>
<div class="psdg-right-red"></div>
<div class="psdg-right-red"></div>
<div class="psdg-right-red"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">Article's Submissions</div>
<div class="psdg-right-red"></div>
<div class="psdg-right-red"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">Link Directories</div>
<div class="psdg-right-red"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">High-PR-One-Ways</div>
<div class="psdg-right-red"></div>
<div class="psdg-right-red"></div>
<div class="psdg-right-red"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">Social Bookmarking</div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">Link Wheels</div>
<div class="psdg-right-red"></div>
<div class="psdg-right-red"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">Blog commenting</div>
<div class="psdg-right-red"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">Forum Profiles</div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">Rel. Niches Backlinks</div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">Blog Creation</div>
<div class="psdg-right-red"></div>
<div class="psdg-right-red"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">5-Day Support</div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div class="psdg-left">Monyhly Reporting</div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>
<div class="psdg-right-green"></div>

<div id="psdg-bottom">
<div class="psdg-bottom-cell" style="width:129px; text-align:left; padding-left: 24px;">One month:</div>
<div class="psdg-bottom-cell"><a href="#">35 $</a></div><!--Silver-->
<div class="psdg-bottom-cell"><a href="#">200 $</a></div><!--Gold-->
<div class="psdg-bottom-cell"><a href="#">400 $</a></div><!--Titanium-->
<div class="psdg-bottom-cell" style="border:ne;"><a href="#">600 $</a></div><!--Diamond-->
</div>

<div id="psdg-bottom">
<div class="psdg-bottom-cell" style="width:129px; text-align:left; padding-left: 24px;">6 Months <span>-15&#37;</span>:</div>
<div class="psdg-bottom-cell"><a href="#">178.50 $</a><br /><strike>before 210 $</strike></div><!--Silver-->
<div class="psdg-bottom-cell"><a href="#">1020 $</a><br /><strike>before 1200 $</strike></div><!--Gold-->
<div class="psdg-bottom-cell"><a href="#">2040 $</a><br /><strike>before 2400 $</strike></div><!--Titanium-->
<div class="psdg-bottom-cell" style="border:ne;"><a href="#">3060 $</a><br /><strike>before 3600 $</strike></div><!--Diamond-->
</div>

<div id="psdg-bottom">
<div class="psdg-bottom-cell" style="width:129px; text-align:left; padding-left: 24px;">1 Year <span>-30%</span>:</div>
<div class="psdg-bottom-cell"><a href="#">273 $</a><br /><strike>before 420 $</strike></div><!--Silver-->
<div class="psdg-bottom-cell"><a href="#">1560 $</a><br /><strike>before 2400 $</strike></div><!--Gold-->
<div class="psdg-bottom-cell"><a href="#">3120 $</a><br /><strike>before 4800 $</strike></div><!--Titanium-->
<div class="psdg-bottom-cell" style="border:ne;"><a href="#">4680 $</a><br /><strike>before 7200 $</strike></div><!--Diamond-->
</div>

</div>

<div id="psdg-footer">
* Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

</div>

and the css:

Code:




#psdgraphics-com-table {
	margin:0;
	padding: 4px;
	width: 578px;
	font: 11px Arial, Helvetica, sans-serif;
	color:#747474;
	background-color:#0c2a62;
}


#psdg-header {
	margin:0;
	padding: 14px 0 0 24px;
	width: 554px;
	height: 55px;
	color:#FFF;
	font-size:13px;
	background: #0c2c65 url(images/head-bcg.jpg) no-repeat right top;	
}

.psdg-bold {
	font: bold 22px Arial, Helvetica, sans-serif;
	
}

#psdg-top {
	margin:0;
	padding: 0;
	width: 578px;
	height: 46px;
	border-top: 2px solid #FFF;
	background: #eff4ff url(images/top-light-blue.png) repeat-x left top;	
}

.psdg-top-cell {
	font-weight:900;
	float:left;
	padding: 15px 0 0 0;
	text-align:center;
	width:105px;
	height: 31px;
	border-right: 1px solid #ced9ec;
	color:#1f3d71;
	font: 15px Arial, Helvetica, sans-serif;
}

#psdg-middle {
	margin:0;
	padding: 0;
	width: 578px;
	background: #f6f6f6 url(images/center-bcg.png) repeat-y right top;	
}

.psdg-left {
	float:left;
	margin:0;
	padding: 10px 0 0 24px;
	width: 129px;
	text-align: left;
	height: 25px;
	border-right: 1px solid #ced9ec;
	border-bottom: 1px solid #b3c1db;
	color:#1f3d71;
	font: 13px Arial, Helvetica, sans-serif;
	background: #e4ebf8 url(images/center-blue.png) repeat-y left top;
}



.psdg-right {
	font-weight:bold;
	float:left;
	margin:0;
	padding: 11px 0 0 0;
	width: 105px;
	text-align:center;
	height: 24px;
	border-right: 1px solid #ced9ec;
	border-bottom: 1px solid #b3c1db;
}

.psdg-right-green {
	background:  url(images/ok.png) no-repeat top;
	background-repeat:no-repeat;
	background-position:center;
	color:#336600;
	font-weight:bold;
	float:left;
	margin:0;
	padding: 11px 0 0 0;
	width: 105px;
	text-align:center;
	height: 24px;
	border-right: 1px solid #ced9ec;
	border-bottom: 1px solid #b3c1db;
}

.psdg-right-red {
	background: url(images/cross.png);
	background-repeat:no-repeat;
	background-position:center;
	color:#FF0000;
	font-weight:bold;
	float:left;
	margin:0;
	padding: 11px 0 0 0;
	width: 105px;
	text-align:center;
	height: 24px;
	border-right: 1px solid #ced9ec;
	border-bottom: 1px solid #b3c1db;
}

#psdg-bottom {
	clear:both;
	margin:0;
	padding: 0;
	width: 578px;
	height: 48px;
	border-top: 2px solid #FFF;
	background: #e4e3e3 url(images/bottom-line.png) repeat-x left top;	
}


.psdg-bottom-cell {
	float:left;
	padding: 15px 0 0 0;
	text-align:center;
	width:105px;
	height: 33px;
	border-right: 1px solid #ced9ec;
	color:#070707;
	font: 13px Arial, Helvetica, sans-serif;
}

.psdg-bottom-cell strike {color:red; text-decoration:strike; font-size:.9em;}
.psdg-bottom-cell a {color:green; font-weight: bold;}


#psdg-footer {
	font-size: 10px;
	color:#8a8a8a;
	margin:0;
	padding: 8px 0 8px 12px;
	width: 566px;
	background: #f6f6f6 url(images/center-bcg.png) repeat-y right top;	
}

Thread: Need help to align divs

Thread Tools

Display

Need help to align divs

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions