www.webdeveloper.com
Results 1 to 1 of 1

Thread: Need help to align divs

  1. #1
    Join Date
    May 2010
    Posts
    5

    Need help to align divs

    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;	
    }
    Attached Images Attached Images
    Last edited by Ray_don; 06-06-2011 at 12:12 PM. Reason: Problem solved

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles