Выровнять центральный блок между двумя блоками по центру

[px379]

Здравствуйте! Суть состоит вот  в чем, в шапке есть 3 блока (по настоящему их - 5, ниже я нарисовал схему для понятности). Надо средний блок #conteiner, вместе с его содержимым, выровнять по центру, относительно двух крайних - #akciya  и #order_form.

 

Ну или на худой конец, хотя бы по центру шапки. Абсолютное позиционирование не подходит. При разных разрешениях монитора, крайние блоки уйдут  в стороны, а средний останется на своей позиции.

Думал уже воспользоваться табличной версткой, но, я так понимаю, что при табличной вестке можно забыть про обтекание элеменов (что бы при масштабировании окна браузера, элементы таблицы съезжали вниз).
 
Скриншот для наглядности

 

CSS:

/*   ШАПКА   */#header{width: 100%;/*Ширина*/background: #fcfff4; /* Old browsers */background: -moz-linear-gradient(top,  #fcfff4 0%, #c4c4c4 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#c4c4c4)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #fcfff4 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #fcfff4 0%,#c4c4c4 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #fcfff4 0%,#c4c4c4 100%); /* IE10+ */background: linear-gradient(to bottom,  #fcfff4 0%,#c4c4c4 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */border-bottom: 5px solid #959595; /* Параметры нижнего бордюра */}/*Расширяем шапку по вертикали в зависимости от содержимого*/#header:after {clear: both;display: block;content: '';}/*Акция*/#akciya{background-image: url('images/flyer.jpg');background-repeat: no-repeat;width:500px;/*Ширина*/height:353px;/*Высота*/margin:1%;/* Отступы вокруг элемента */float: left;/* Обтекание по правому краю */}/*Контейнер для таймера и ярлыка*/#conteiner{width:450px;/*Ширина*/height:225px;/*Высота*/margin:6% 0 0 0;/* Отступы вокруг элемента */float: left;/* Обтекание по правому краю */}/*Ярлык - СПЕШИТЕ*/#tag{background-image: url('images/yarlyk.png');background-repeat: no-repeat;width:249px;/*Ширина*/height:95px;/*Высота*/margin-left:auto; margin-right:auto;/* Выравниваем блок по центру */}/*Таймер*/#timer{width:425px;/*Ширина*/height:110px;/*Высота*/margin-left:auto; margin-right:auto;/* Выравниваем блок по центру */}/*Форма заказа*/#order_form{background:#fc0;width:250px;/*Ширина*/height:353px;/*Высота*/margin:1%;/* Отступы вокруг элемента */float: right;/* Обтекание по правому краю */}

Edited April 15, 2014 by px379

[antonKar]

/*Контейнер для таймера и ярлыка*/
#conteiner {
overflow: hidden;

}

 

И уже внутри контейнера делайте что хотите. Например

#conteiner-wrapper {

width:450px;/*Ширина*/
height:225px;/*Высота*/
margin:0 auto;/* Центрирование */

}

[px379]

 

/*Контейнер для таймера и ярлыка*/

#conteiner {

overflow: hidden;

}

 

И уже внутри контейнера делайте что хотите. Например

#conteiner-wrapper {

width:450px;/*Ширина*/

height:225px;/*Высота*/

margin:0 auto;/* Центрирование */

}

 

Помогло, но отчасти. Начали вылазить другие косяки. При малом разрешении 1366х768, правый блок уехал вниз, контейнер с таймером вообще сплющело.

За идею спасибо, буду от этого варианта отталкиваться и пытаться дальше что-то химичить)

[mrnobody]

Можно еще так: http://jsfiddle.net/mrnobody/B5A28/

Фуллскрин: http://fiddle.jshell.net/mrnobody/B5A28/show/

 

Рекомендую почитать эту статью http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html

Edited April 15, 2014 by mrnobody

[px379]

Можно еще так: http://jsfiddle.net/mrnobody/B5A28/

Фуллскрин: http://fiddle.jshell.net/mrnobody/B5A28/show/

 

Рекомендую почитать эту статью http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html

Класс! То что доктор прописал. А я уже начал скрипт искать для этих целей.

За статью отдельное спасибо, страницу добавил в закладки. В будущем наверняка пригодится.