центрирование позиции фиксированной трехколоночной разметки

Question

У меня есть

----------------------------------------------------
|                                                  |
|  |-------------------------------------------|   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |  15%   |   |
|  |   15%   |         70%            |  fixed |   |
|  |  fixed  |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  | ------------------------------------------|   |
|        max width of the this 100% is 400px       |
=====================================================

http://jsfiddle.net/fwQq4/

Чего я не могу достичь, так это максимальной ширины всех трех столбцов в 400 пикселей;и центрирование трех столбцов.

Как мне этого добиться.

Answer 1

Нет проблем с CSS2, см. этот пример скрипта :

Разметка:

<div class="wrapper">
    <div id="left">
    </div>
</div>
<div id="middle">
</div>
<div class="wrapper">
    <div id="right">
    </div>
</div>

Таблица стилей:

html,
body {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
}
.wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
#left {
    width: 15%;
    background: red;
}
#middle{
    width: 70%;
    margin-left: 15%;
    background: yellow;
}
#right {
    width: 15%;
    margin-left: 85%;
    background: red;
}