CSS Menu bar, Align it to center or full width.

Hello.
I'm having a menu made in CSS that i would like either to be aligned to the center or making it 100% width so it gets re-sized automatically depending on screen size. Currently it's either fitting perfect or there is space right to it as it's aligned to the left (depends on what screen resolution i use).

The code is below. I tried to change the "left" things to "center" but didn't help. Thanks!

.clsSubNav { 
	padding-top:0px;
}
.clsListingHead {
	padding-top:20px;
	min-height:56px;
	_height:76px;
}
.clsListingHead h2 { 
	font-family:Impact; 
	font-size:22px; 
	font-weight:normal; 
	color:#676768;
}
.clsSubMenu{
	overflow:hidden;
	zoom:1;
	_height:1%;
	_overflow:visible;
}
	.clsSubMenu li{
		
		float:left;
		
	}
			.clsSubMenu li a{
			background:url(../../images/screen_gray/bg-menutoright.png) no-repeat right top;
	      		padding-left:14px;
            height:46px;
            line-height:46px;
            position: relative;
            display:table;

           
		border-left:1px solid #c2c2c2;
            float:center;
        }
            .clsSubMenu li a span{
                background:url(../../images/screen_gray/bg-menutoleft.png) no-repeat left top;
                color:#000;
                font-family:"Segoe UI";
                font-weight:normal;
                font-size:16px;
                padding:0 31px 0 17px;
                height:46px;
                line-height:46px;
                position: relative;
                display:table;
                border-right:1px solid #c2c2c2;
                float:center;
                

                
            }
		
		.clsSubMenu li a:hover, .clsSubMenu .clsActiveListing a{
			background:url(../../images/screen_gray/bg-menulefthover.png) no-repeat left top;
		}
			.clsSubMenu li a:hover span, .clsSubMenu .clsActiveListing a span{
				background:url(../../images/screen_gray/bg-menutorighthover.png) no-repeat right top;
				color:#000;
			}

Code (markup):

 

Im in a hurry and cant really stufy your code but have you tried margin: auto; ?

 

Hi
Yeah i did and didn't work. Maybe i need to remove something else before or so?
Thank you

 

It would really help if i could see your html that this css is used for. Without the html i cant really tell whats what.

 

Hi
It's a .tpl file and the code is

<div id="selSubNav" class="clsSubNav">
    <ul id="selSubMenu" class="clsSubMenu">

							<li class="clsLiFirst">
					<a href="/listing/featured/"><span>Featured</span></a>
				</li>
							<li class="">
					<a href="/listing/newlisting/"><span>New Listings</span></a>
				</li>
							<li class="">
					<a href="/listing/mostactive/"><span>Most Active</span></a>
				</li>
							<li class="">
					<a href="/listing/endingsoon/"><span>Ending Soon</span></a>
				</li>
							<li class="">
					<a href="/listing/justsold/"><span>Just Sold</span></a>
				</li>
							<li class="">
					<a href="/listing/endedunsold/"><span>Ended Unsold</span></a>
				</li>

			                                <li class="">
					<a href="/tags/"><span>Browse</span></a>
				</li>
	
																								
																					</div>
				
			
			
	

Code (markup):

Thank you!

 

Have you tried the margin: auto on .clsSubNav? Also, you could always do this:

<div id="selSubNav" class="clsSubNav" align="center">

 

Yeah i tried that but didn't work either.. Thanks anyway

 

What is up with your formatting?

 

What do you mean?

 

I think, he meant to say that your code need some indenting.

Use some of these to get your code(existing code) properly formatted:
http://cssbeautify.com/
http://infohound.net/tidy/

And next time, while coding, make sure you properly indent the code which will greatly helps in readability.

And regarding your issue, can you please post a screenshot of the problem.

 

Solved it, not sure how tough.. but it's working

 

Share the solution with us.