Three Column Layout: Fixed Width Center with Fluid Side Columns

Three column layout: fixed width center with fluid side columns

As per your screenshot you can write like this:

body{
 background: url(image.jpg) repeat center center;
}

.container{
  width:500px;
  margin:0 auto;
}

UPDATED:

Solution according to your question Three column layout: fixed width center with fluid side columns

http://jsfiddle.net/XMg2h/3/

But it's work in modern browsers

UPDATED

http://jsfiddle.net/XMg2h/10/

it's work in all browsers

Fluid three column layout with fixed width center column

Three ways to achieve a fluid / fixed column layout

Method #1 - with display: table

This is one of the easiest methods and has good browser support.

Compatibility: IE8 + and all modern browsers

• body gets display: table - this could also be applied to a div wrapper instead.

• table-layout: fixed ensures the middle column remains fixed width

• the direct div children of body get display: table-cell

• the body gets a min-width to ensure the left and right columns do not get too small

• the middle column is fixed at your desired width (500px in this example)

• the left and right columns inherit the remaining page width

#1 - Working Example

html {  height: 100%;}body {  display: table;  height: 100%;  margin: 0;  width: 100%;  table-layout: fixed;  min-width: 800px;}body > div {  display: table-cell;}.left {  background: #000;}.middle {  background: #F00;  width: 500px;}.right {  background: #F90}

<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>

Three Column DIV layout dynamics; left = fixed, center = fluid, right = fluid

You can do this by using float:left for first column, float:right for the last column and making the center column float:none

Updated Demo: http://jsfiddle.net/L85rp/3/

HTML

<div class="col1">Column1</div>
<div class="col3">Column3</div>
<div class="col2">Column2</div>

CSS

.col1 {
    background-color: #ddf;
    float: left;
}
.col2 {
    background-color: #dfd;
    float: none;
}
.col3 {
    background-color: #fdd;
    float: right;
}

---

NOTE: It is necessary to place your right column before your center column in HTML (see above, col3 comes before col2 in the HTML) to make sure that when the browser renders the center column, it knows how to render correctly around the existing floating elements.

---

Updated CSS

.col1 {
    background-color: #ddf;
    float: left;
    width: 285px;
    height: 65px;
}
.col2 {
    background-color: green;
    float: none;
    height: 65px;
    overflow: hidden;
    display: table-cell; /* turn this off to lock height at 65px */
}
.col3 {
    background-color: cyan;
    float: right;
    height: 65px;
}

Updated demo: http://jsfiddle.net/ew65G/1/

Simple 3-column fluid layout, but center column empty with fixed-width?

What about using an inner element for spacing? Could be another DIV tag inside each column:

http://jsfiddle.net/sZehH/3/

HTML:

<section> 
    <div class="left">
        <p>Column 1, lorem ipsum dolor bla bla dogs and cats</p>
    </div>

    <div class="right">
        <p>Column 3, lorem blops dolor bla laa cats and dogs</p>                        
    </div>
<section>

​CSS:

section div {
    float: left;
    width: 50%;

}

section div p {
    background: pink;
    padding: 2.5%;    
}

.left p {
    margin-right: 20px;
}

.right p {
    margin-left: 20px;
}

I've used the paragraphs that where already there, but you probably will have more than one element, so you will have to add a wrapping element to account for that.
​

CSS 3 column liquid layout with fixed center column

Is this helpful?

CSS Only Demo

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>

HTML5 Three Column layout with resizable left/center and fixed right

Using display flex.
You can put the initial width: "width: 75%"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy"  content="connect-src * 'unsafe-inline';">
        <style>

body    {
          margin:0;
          padding:0;
          }

  #container      {
                      /*! overflow: none; */
                      height: 100vh;
                      width: 100vw;
                      margin: 0;
                      padding: 0;
                      display: flex;
                  }

  #a_left         {
                      /*! float:left; */
                      height: 100vh;
                      width: 75%; /* <--- Initial Width */
                      background-color: black;
                      overflow:auto;
                      resize: horizontal;
                  }
  #a_center       {
                      /*! float:left; */
                      height: 100vh;
                      min-width: 80px;
                      /*! width:10%; */
                      /*! overflow: none; */
                      background-color:darkgray;
                      flex: auto;
                  }
  #a_right        {
                      /*! float:right; */
                      height: 100vh;
                      width: 40px;
                      /*! min-width: 40px; */
                      /*! max-width: 40px; */
                      overflow:none;
                      background-color:darkslategray;
                      color:white;
                  }

  #al_text        {
                      width: 100%;
                      height: 95%;
                      overflow-y: auto;
                      background-color: black;
                      color:white;
                  }
  #al_cmd         {
                      width: 100%;
                      height: 5%;
                      overflow: none;
                      background-color: darkslategray;
                  }
  #ac_map         {   width:100%;
                      height: 25%;
                      overflow: hidden;
                      background-color: #222222;
                      color: white;
                  }
  #ac_paged       {   width:100%;
                      height: 75%;
                      overflow-y: auto;
                      background-color: #222222;
                      color: white;
                  }

    </style>
    </head>
    <body>
        <div id="container">
        <div id="a_left">
            <div id="al_text" role="log" aria-live="polite">
                A lot of text goes here.
            </div>
            <div id="al_cmd">
                <table width="100%">
                    <tr>
                        <td style="width:10%; color:white;">Command</td>
                        <td style="width:70%;"><input style="width:97%;" type="text" id="message"/></td>
                        <td style="width:15%;"><input id="btnSend" type="button" value="Send" disabled="disabled" onclick="onSendClick()"></td>
                    </tr>
                </table>
            </div>
        </div> <!-- /a_left -->
        <div id="a_center">
            <div id="ac_map">
                An image goes here.
            </div>
            <div id="ac_paged" aria-live="polite">
                Text that sticks goes here and it could be very long.
            </div>
        </div> <!-- /a_right -->
        <div id="a_right">
            In<br/>
            Eq<br/>
            He<br/>
        </div>
        </div> <!-- /container -->

        </body>
</html>

CSS: Three-column layout with a semi-fluid center

For this you can use display:table property. Write like this:

#wrapper{
    display:table;
    width:100%;
    height:100%;
}
#wrapper > div{
    display:table-cell;
    height:100%;
}

#left {
    width:50px;
    min-width:50px;
    background-color:pink;
}

#center {
    background-color:green;
    min-width:200px;
}

#right {
    width:50px;
    min-width:50px;
    background-color:red;
}

body, html{
    width:100%;
    height:100%;

}

Check this http://jsfiddle.net/ykAPM/137/

---

Related Topics