Align centre and add something on one side!

HTML & CSS
1

I have 5 horizontal text buttons which I want to centre horizontally. I then want to add a sixth button to the right, say 25px away from the fifth but not effecting the centre point of the five buttons!

Hope that makes sense!

cheers
monkey

2

I assume you mean the centering should be based in the width of the five buttons, as if the sixth didn’t exist AND THEN then sixth should be offset by X pixels, to the right of the fifth button?

if so this could be what you are looking for:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<style type="text/css">
	.nav a { display:block; padding:10px ; background: orange;}
	.nav ul {  margin:0; padding:0;list-style:none; margin-left:50%; position:relative; float:left}
	.nav ul li{float: left; position:relative; left:-50%}
	.nav { background:silver;  width:100%; overflow:hidden}
	.nav li.sixth {position:absolute;  float:none; left:50%; margin-left:25px}
</style>
</head>

<body>


<div class="nav">
	<ul>
     	<li><a href="#">Button 1</a></li>
     	<li><a href="#">Button 2</a></li>
     	<li><a href="#">Button 3</a></li>
     	<li><a href="#">Button 4</a></li>
     	<li><a href="#">Button 5</a></li>
          <li class="sixth"><a href="#">Button 6</a></li>

     </ul>

</div>
</body>
</html>