CODEWITHSUNDEEP
cssalignmentpositioning
Gag
Gag

Reputation: 11

CSS Positioning, need help for alignment of links

in all catelog pages of site the link menu on top is not getting aligned, see sample link - car finance section.

*whenever we try to put 3rd link on top menu left- it splits to next line

Same issue on top menu right - any 4th link splits to next line*

We tried changing width - used all permutation / combination - but to no help

What we seek for it is

so that both comes in 1 single line

below is the code of css used for - pl suggest

#footer-container { 
   float:left;
   width:1000px;
   clear:both;
   background:#FFFFFF;
   text-align:center !important;
}   

#footer-container .footer-top-box {
   float:left;
   width:965px;
   margin:0 0 10px 5px;
   padding:0 5px 0 10px;
   height:33px;
   background:url(../images/footer-box-bg.gif) repeat-x;
   border:1px solid #e7e5e5;
}    

.footer-top-box .footer-top-box-left {
   float:left;
   width:300px;
   margin:0 0 0 5px;
   font: normal 10px Arial, Helvetica, sans-serif;
   color:#000000;
   text-align:left;
   padding:10px 0 0 0
}    

.footer-top-box-left img {
   margin:0 3px 0 3px;
}    

.footer-top-box .footer-top-box-right {
   float:right;
   width:500px;
   margin:0 5px 0 0 ;
   font: normal 10px Arial, Helvetica, sans-serif;
   color:#000000;
   text-align:right;
   padding:10px 0 0 0;
}    

.footer-top-box-right p {

margin:0;
padding:0;
font: normal 10px Arial, Helvetica, sans-serif;
color:#000000;
}    

.footer-top-box-right p a:link,
.footer-top-box-right p a:hover,
.footer-top-box-right p a:visited { 
   margin:0;
   padding:0;
   font: normal 10px Arial, Helvetica, sans-serif;
   color:#b60205;
   text-decoration:underline;
   text-align:justify;
}

Upvotes: 0

Views: 99

Answers (1)

hyarion
hyarion

Reputation: 2251

Change the width of the holder div - "footer-top-box-left" or "footer-top-box-right" and it should work.

Testing with a copy of your html I was able to add a 3rd item on the left after changing "footer-top-box-left" from 300px to 400px width.

If you want to have box boxes as a single line I would recommend making a single div and perhaps using float: right for the menu items that must be aligned to the right.

Upvotes: 1

Related Questions