CSS 3 column liquid layout with fixed center column
Solution 1
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');
});
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"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
</div>
Solution 2
Here's a good solution, in my opinion the easiest one. It looks clean and it doesn't need wrapper div.
HTML
<body>
<div id="left_container">
<div id="left">
left content
</div>
</div>
<div id="center">
center content
</div>
<div id="right_container">
<div id="right">
right content
</div>
</div>
</body>
CSS
#left_container {
width:50%;
float:left;
margin-right:-480px; /* minus half of the center container width */
/* not important */
height: 200px;
}
#left {
margin-right:480px; /* half of the center container width */
/* not important */
background: #888;
height: 600px;
}
#center {
width:960px; /* size of the fixed width */
float:left;
/* not important */
color: #FFF;
background: #333;
height: 500px;
}
#right_container {
width:50%;
float:right;
margin-left:-480px; /* minus half of the center container width */
/* not important */
height: 300px;
}
#right {
margin-left:480px; /* half of the center container width */
/* not important */
height: 300px;
background-color: #888;
}
enjoy!
Solution 3
There are several solutions to this, probably the post popular of which is the Holy Grail method. It's a little above my head, but these links explain it pretty well.
http://alistapart.com/article/holygrail
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I would start with A List Apart's article. Good luck.
After re-reading it, I think this is what I would do:
HTML
<div id="header">
</div><div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div><div id="footer"></div>
CSS
body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
#footer {
clear: both;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
You'll need to adjust some of the dimensions, but the inline comments should help with that. So there you have it. The Holy Grail Layout.
Adam Levitt
Updated on June 05, 2022Comments
-
Adam Levitt about 2 years
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!)