CSS 3 column liquid layout with fixed center column

css, html, layout, liquid-layout

Solution

Is this helpful?

CSS Only Demo

jQuery Demo(Cross Browser Compatible)

<div class="wrap">
    <div id="pixelLeft">&nbsp;</div>
    <div id="bannerCenter">
      <img src="images/mybanner.png" />
    </div>
    <div id="pixelRight">&nbsp;</div>
</div>
<div style="clear:both;"></div>

*{
    margin:0;
    padding:0;
}
#bannerCenter{
    background:#ddd;
    width: 500px;
    float:left;
}
#pixelLeft{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}
#pixelRight{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

#bannerCenter,#pixelLeft,#pixelRight{
    height: 400px;
}

You can use jQuery instead of using `calc(50% - 250px);` to make it compatible for older browsers.

$(document).ready(function() {
    $(window).on('resize', function() {
         $('#pixelLeft, #pixelRight').css('width',($('body').width()-$('#bannerCenter').width())/2);
    }).trigger('resize');      
});

Update: June 2018

Added flexbox solution for same problem.

*{
    margin:0;
    padding:0;
}
.wrap {
  display: flex;
}
#pixelLeft, #pixelRight{
  display: flex;
  flex:1;
}
#bannerCenter{
    background:#ddd;
    min-width: 500px;
    display: flex;
    flex: 1;
}
#pixelLeft{
    background:#999;
}
#pixelRight{
    background:#999;
}
#bannerCenter,#pixelLeft,#pixelRight{
    height: 400px;
}

<div class="wrap">
    <div id="pixelLeft">&nbsp;</div>
    <div id="bannerCenter">
      <img src="images/mybanner.png" />
    </div>
    <div id="pixelRight">&nbsp;</div>
</div>

Problem

I want to make for my marketing site a 3 column layout that has images in the top banner. I want to have a liquid left/right side with a fixed center. The html would ideally look like this: ``` <div id="pixelLeft">&nbsp;</div> <div id="bannerCenter"> <img src="images/mybanner.png" /> </div> <div id="pixelRight">&nbsp;</div> <style> #pixelLeft { background: url(../../images/pixel_left_fixed.png) 0 0 repeat-x; } #pixelRight { background: url(../../images/pixel_right_fixed.png) 0 0 repeat-x; } #bannerCenter { /* something here to make fixed width of 1550px */ } </style> ``` The images in the left/right pixel sides are 1px x 460px. The image mybanner.png is 1550px x 460px. Thanks in advance! (Especially if it will work in ALL browsers!)

Original source