中心柱流体宽度

Question

I have 3 column layout. I am trying to make the center column with fluid width and the left and right column with fixed width 200px. it looks fine on my screen but when i resize browser window then right column fell down on smaller window size.

CSS :

#content {
    float: left;
    width: 66.8%;
}
#sidebar-left {
    float: left;
    margin-right: 24px;
    width: 200px;
}
#sidebar-right {
    float: right;
    width: 200px;
}

Answer 1

You don't really need jQuery for this purpose. You can leverage your layout by using plain old css. The flexible box model would fit this scenario perfectly but I wouldn't suggest it due to the lack of browser support currently. I'd suggest placing your boxes in a wrapper with display:table and giving the child boxes a display:table-cell

<div id="wrapper">
    <div class="sidebar left fluid"></div>
    <div class="content fluid"></div>
    <div class="sidebar right fluid"></div>
</div>

And then to display all boxes inside the wrapper element side by side, you can use the following css...

#wrapper{display:table}
div{height:300px; display:table-cell}
div.content       {  width:100% }
div.sidebar  { width:200px }
.left { float:left }
.right { float:right }
.fluid{display:inline-block}

Here's a JSFiddler Example where I coloured the boxes so you can easily distinguish them

Answer 2

A simple option for this sort of layout would be to go the display: table route:

.wrap {
    display: table; 
    margin: 0 auto;
}

.wrap > div {
    display: table-cell; 
    height: 200px; 
    background: green;
    width: 66%;
}

#sidebar-left, #sidebar-right {
    width: 200px; 
    background: red;
}

Answer 3

I have sort it with this way.

<div id="wrap">
<div id="sidebar-left"></div>
<div id="sidebar-right"></div>
<div id="content">
<div class="inner"></div>
</div>
</div>

#wrap { overflow:hidden; }
#content {
    padding: 0 200px;
    margin: 0 auto;
}
#content .inner {
    width: 98%;
    margin: 0 auto;
}
#sidebar-left {
    float: left;
    width: 200px
}
#sidebar-right {
    float: right;
    width: 200px
}

Answer 4

Demo : Link

HTML:

<div class="lbar">
    <h1>Left Bar</h1>
    <ul>
        <li>Home</li>
        <li>Development</li>
        <li>Dowload</li>
        <li>Support</li>
    </ul>
</div>
<div class="rbar">
    <h1>Right Bar</h1>
    <ul>
        <li>Peter</li>
        <li>Steve</li>
        <li>Andrew</li>
        <li>Chris</li>
    </ul>
</div>
<div class="middle">
    <h1>Middle</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint</p>
</div>

CSS:

* {
    font-size: 14px;
}
.lbar { 
    float:left ; 
    width:120px; 
    background-color:yellow;
}
.rbar { 
    float:right ; 
    width:120px; 
    background-color:yellow;
}
.middle { 
    margin-left:120px; 
    margin-right:120px; 
    background-color:gray; 
}