html - 3 column layout: middle col have max width, right col is dynamic

Question

Is it possible to create such CSS layout without javascript?

• left column: width is 23%
• middle column: width is 43.5%, max width is 550px
• right column: dynamic (stretches to container width)

The main problem is with middle column's max width. Don't know how to make right column dynamic and stick it to middle column's right edge if its width reached maximum value.

Answer 1

在您提出问题后大约 30 分钟，我开始尝试，然后放弃了，但是float最后没有 a 的想法div（感谢@MrAlien）使我的示例工作：http: //jsfiddle.net/6pJJt/3/。

HTML：

<div id="col1" class="column">Column 1</div>
<div id="col2" class="column">Column 2</div>
<div id="col3" class="column">Column 3</div>

CSS：

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
}
.column {
    height: 100%;
    float: left
}
#col1 {
    width: 23%;
    background: red
}
#col2 {
    width: 43.5%;
    max-width: 550px;
    background: orange
}
#col3 {
    width: 100%;
    background: yellow;
    float: none
}