2

I have been fiddling with this issue all day now. I need to create a 3 column design where the middle div has a fixed width and the left/right divs are dynamic (responsive to the width of page). For example:

#container {
float:left;
width:100%;
}

#left {
min-width: 200px;
width: 100%;
}

#middle {
width: 250px;
}

#right {
min-width: 200px;
width: 100%;
}

HTML:

<div id="container">
    <div id="left">
        Left column should expand with the width of the browser - with a min-width.
    </div>

    <div id="middle">
        Middle column with fixed width.
    </div>

    <div id="right">
        Right column should expand with the width of the browser - with a min-width.
    </div>
</div>

I have created a fiddle for this: http://jsfiddle.net/2jGAe/ Can you help me solve this styling issue?

4

1 に答える 1

6

重要なのは、以下を使用することです。

#container > div {
    display: table-cell;
}

#leftおよび#rightdivに幅がありません。デモを参照してください。

于 2012-10-25T14:43:53.750 に答える