Question

I have

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

http://jsfiddle.net/fwQq4/

What I am not able to achieve is the max width of the entire three columns as 400px; and centering the three columns.

How do i achieve this.

Answer 1

No problem with CSS2, see this example fiddle:

Markup:

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

Style sheet:

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;
}