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"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </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!)
Is this helpful?
jQuery Demo(Cross Browser Compatible)
<div class="wrap">
<div id="pixelLeft"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </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');
});
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"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
</div>