Проблемы с выравниванием.

[Адель]

Имеется небольшая шапка, где должны находится несколько кнопок и логотип(просто название сайта). Располагаться должно в таком порядке: ссылка-кнопка(прижата слева), по центру логотип, кнопка(прижата справа).

 

 

.,,

<div id="header">
<a class="menu" href="index.html">Меню</a>

<a class="logo" href="index.html"><b>Название сайта</b></a>

<a class="add" href="index.html">+</a>

</div>

...

 

#header{

margin:0 auto;

height:32px;

background: #333;

position:fixed;

width:100%;

z-index:1;

}

 

.logo{

text-decoration:none;

color:white;

font-variant:small-caps;

font-size:large;

display:block;

margin-top:5px;

text-align:center;

}

 

.menu{

float:left;

}

 

.add{

float:right;

}

 

 

 

Что бы название сайта поставить в середину пришлось задать display:block, соответственно всё остальное переносится на другую строку. Как быть?

 

[CroaToa]

.menu {    float:left;}.add {    position:absolute;    right:0;}.logo {    display:block;    width:100%;    text-align:center;}

как вариант)

[Zverushka]

Я бы лого сделала абсолютом и задала бы ему на глазок допустим  250 пикселей ширину, соотвественно, чтобы он стал находиться по нцетру нужно было бы задать ему left: 50%; марги-лефт -125пикселей; text-align: center; 

Ну а боковушки плавающими оставить.

Edited March 4, 2014 by Zverushka