CSS 3 column liquid layout with fixed center colum

2019-03-13 03:36发布

站内问答 / HTML/CSS
852 4 6

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!)

4条回答
beautiful°
2楼-- · 2019-03-13 03:46 

<body>
  <div style="   width: 200px;    float: left;    background: red;    height: 100px;">Left</div>
 
  <div style="    float: right;    width: 200px;    background: red;    height: 100px;">Right</div>
   <div style="    background: blue;  margin:0 auto; height:100px;">Center content goes here</div>
</body>

Here is simple trick through html and css only to do such a layered structure and it will keep middle layer in center even if you will resize browser.

查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
3楼-- · 2019-03-13 03:49

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:#ffffd;
    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:#ffffd;
    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>

查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
4楼-- · 2019-03-13 04:08

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.

查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
5楼-- · 2019-03-13 04:12

Here's a good solution, in my opinion the easiest one. It looks clean and it doesn't need wrapper div.

Demo

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!

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)