Хоризонтално центриране на няколко DIV-a

[ystefanov]

Как мога да центрирам хоризонтално няколко див-а спрямо един основен с фиксирани размери?
На всеки един див им задавам float: left; за да се позиционират хоризонтално. Задавам размери на основния див,а на тези които са в него задавам width: auto; margin: 0 auto; След като вмъкна текст, всеки един див ми се разпъва спрямо текста. А аз искам да заемат останалото пространство от основният див, като се разпънат равномерно.

 

[macmen]

width: auto; задавай точна стойност и няма да ти се размества, и при задаване на float:left; няма нужда от margin: 0 auto;

 

[ystefanov]

Май не успях да обясня правилно това което искам.
Трябва ми напротив да се разпъват симетрично дивовете спрямо основния див. В този пример ми се иска 4-те менюта да се разпънат симетрично (центрирано) спрямо този див с размери 400px.
За това се опитах да ги центрирам с margin: 0 auto;

http://moemesto.ru/yordanp/file/9865805/menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style type="text/css">
#menu {
	width: 400px;
	height: 24px;
	}
	
.menu1 {
	width: auto;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	float: left;
	background-repeat: repeat-x;
	height: 22px;
	padding: 3px 5px 0px 5px;
	background-image: url(http://prikachi.com/images/223/2695223a.jpg);
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #888;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #888;
	margin: 0 auto;
	}
	
	
.menu2 {
	width: auto;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	float: left;
	background-repeat: repeat-x;
	height: 22px;
	padding: 3px 5px 0px 5px;
	background-image: url(http://prikachi.com/images/225/2695225G.jpg);
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #888;
	margin: 0 auto;
	}
	
.menu3 {
	width: auto;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	float: left;
	background-repeat: repeat-x;
	height: 22px;
	padding: 3px 5px 0px 5px;
	background-image: url(http://prikachi.com/images/226/2695226p.jpg);
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #888;
	margin: 0 auto;
	}
	
.menu4  {
	width: auto;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	float: left;
	background-repeat: repeat-x;
	height: 22px;
	padding: 3px 5px 0px 5px;
	background-image: url(http://prikachi.com/images/227/2695227w.jpg);
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #888;
	margin: 0 auto;	
	}

</style>
</head>

<body>
<div id="menu"> 
<div class="menu1"><a href="#">меню1</a></div>
<div class="menu2"><a href="#">меню2</a></div>

<div class="menu3"><a href="#">меню3</a></div>
<div class="menu4"><a href="#">меню4</a></div>
</div>


</body>
</html>