3-column layout (fixed-fluid-fixed) with full-screen height

Question

I'm trying to achieve a 3-column fixed-fluid-fixed layout. Also, the height of the layout must take up the whole screen so that it looks like 3 solid columns going from top-to-bottom.

Summary:

Left-column:   fixed-width
Center-column: resizeable-width
Right-column:  fixed-width

- The height for all 3 columns takes up entire screen.
- All 3 columns are always equal length.

My problem is getting the last part to work. I can not get all 3 columns to be equal height.

Here is my HTML/CSS:

<style type="text/css">
  .parent {
    margin-bottom:20px;
    position:relative;
    background-color: green;
  }

  .main {
    margin-left:20%;

    background:#ddd;
    padding: 10px;
    height: 100%;
  }

  .side {
    position:absolute;
    width:20%;

    top:0;
    bottom:0;

    background-color: green;
  }

  .left {
    left:0;
    background-color: red;
  }

  .right {
    right:0;
    background-color: blue;
  }
</style>

<div class="parent">
  <div class="side left">
    Sub Content
  </div>
  <div class="main">
    Main Content<br>
    <img src="" width="200" height="600">
  </div>
  <div class="side right">
    Sub Content
  </div>
</div>

When putting this code in fiddle it looks like equal heights aren't a problem. Fullscreen is. Are you sure about your question? — Zentoaku, Jul 30 '14 at 18:19
Oh, you're right! I just tried it in jsfiddle and it looks exactly like what I want. However, if you take the above CSS/HTML and paste it into a local example.html, and then open it, you'll see the problem if the window height is too short. The 600px tall image extends beyond the parent. Thanks. — user3621156, Jul 30 '14 at 18:25

score 0 · Answer 1 · answered Jul 30 '14 at 18:30

To maintain column width you've to use either bootstrap or any framework or custom CSS that I've written below. It can be done with jquery as per your scenario.

.left-column,.right-column,.center-column{width:25%;display:inline-block;height:100vh;}
.center-column{width:50% !important;}

This will make side columns 25% and center one 50%; vh stands for viewport height. It will give you full height based on your viewport without any positioning hack.

T0 make only center part resizable. I guess you need jquery.

Zentoaku · Accepted Answer · 2014-07-31T05:12:53.123

Is this what you need? http://jsfiddle.net/3MfBa/

HTML:

<div class="side left">
    Sub Content
  </div>
  <div class="main">
    Main Content<br>
    <img src="" width="200" height="600">
  </div>
  <div class="side right">
    Sub Content
  </div>

CSS:

.main {
    position: absolute;
    top:0;
    bottom:0;
    left:20%;
    right:20%;
    background:#ddd;
    padding: 10px;
    overflow: auto;
  }

  .side {
    position:absolute;
    width:20%;

    top:0;
    bottom:0;

    background-color: green;
  }

  .left {
    left:0;
    background-color: red;
  }

  .right {
    right:0;
    background-color: blue;
  }

Alternative CSS (http://jsfiddle.net/DgPRZ/):

body { margin:0; padding:0;}

.main {
    margin-left:20%;
    margin-right:20%;
    background:#ddd;
    padding: 10px;
  }

  .side {
    position:fixed;
    width:20%;

    top:0;
    bottom:0;

    background-color: green;
  }

  .left {
    left:0;
    background-color: red;
  }

  .right {
    right:0;
    background-color: blue;
  }

ALT VERSION 2 (http://jsfiddle.net/B4X4p/2/):

HTML:

<div class="container">
  <div class="col side left">
    Sub Content
  </div>
  <div class="col main">
      <div class="main-content">
        Main Content<br>
      </div>
  </div>
  <div class="col side right">
    Sub Content
  </div>
</div>

CSS:

html, body { margin:0; padding:0; height:100%;}

.container, .container > div.col {
    display: flex;
    flex: 1 0 auto;
}

.container {
    width:100%;
    min-height:100%;
}

.main {
    width: 60%;
    background:#ddd;
    float:left;
}

.main-content {
    padding: 10px;
}

  .side {
    width:20%;
    background-color: green;
    min-height:100%;
    float:left;
  }

  .left {
    background-color: red;
  }

  .right {
    background-color: blue;
  }

That's a very elegant solution and I'll make sure to remember this for future reference. However, I'm trying to achieve a solution where the sidebars are not in a fixed-position (i.e. the content scrolls up with the page). The sample I posted is the expected behavior minus the part where the center (main) content busts out of the center (main) container. — user3621156, Jul 30 '14 at 19:02
@user3621156 I've added second alternative version. Please check if it suits your needs. — Zentoaku, Jul 31 '14 at 05:13

score -1 · Answer 3 · answered Jul 30 '14 at 18:17

-1

I recommend using Bootstrap it's easy to use and implement.

With Bootstrap you could have something like this:

<div class="row">

<div class="col-lg-4 col-md-4 col-sm-4></div>
<div class="col-lg-4 col-md-4 col-sm-4></div>
<div class="col-lg-4 col-md-4 col-sm-4></div>

</div>

And this would do the trick. Bootstrap uses a grid layout system and it is responsive. Read more at getbootstrap.com

answered Jul 30 '14 at 18:17

Daniel

598
1
6
23

Sorry, that wasn't me who downvoted you. I'd love to use bootstrap, however, I need the right column to be fixed-width and attached to the right side of the screen with a navbar (see: right: 0 rule above). I spent a day trying to get the navbar to not overlap with the side columns, but it would always overlap the side/top. If you've got a sample ready that demonstrates the above requirements, that'd be appreciated. – user3621156 Jul 30 '14 at 18:24
@user3621156 Kindly check this fiddle out. http://jsfiddle.net/DaCardinal/2AaSe/ Give feedback if you're looking for more customization. Notice I imported bootstrap in the jsfiddle. – Daniel Jul 31 '14 at 03:23
Hi Daniel, sorry it looks to be creating a row of divs instead of a column of divs. Thanks for your help though. – user3621156 Aug 02 '14 at 03:40

3-column layout (fixed-fluid-fixed) with full-screen height

3 Answers3