Search code examples
javascriptjqueryx-editable

Need to set a middle column DIV exact width with percent based right and left DIVs and set height

I could use some help designing the CSS/HTML for this layout....

The whole thing will be a popup MOdal centered on the screen.

The top full width bar is for a Task Title THe left column is for a Task Description and the Div at the bottom left is a Fixed DIV to hold an Edit Task Description button.

The middle DIV is a fixed width of 200px and will contain many Task data fields.

The Right column will contain a Task Activity/Comment stream. Below it on Bottom right is a Fixed DIV that would hold the Comment form for creating new comments

https://i.sstatic.net/pH9lZ.png enter image description here

This is what I am building....

enter image description here

The reason I am asking for help to build the structure of what it appears I already built is because...

My Task modal DIV currently has a % based width for all 3 columns...

As soon as I set my middle column to a Fixed 200px wide, it then starts to separate my wight column showing big gaps when I expand the browser and resize....

enter image description here

Solution

  • You can make it work by using calc() along with -moz-calc, -webkit-calc and -o-calc for older versions support of firfox, opera and webkit browsers because they don't support calc() property. You can check the browser support table for calc() property in here - http://caniuse.com/#feat=calc

    and check the code in fiddle here - https://jsfiddle.net/zmbupv6v/1/

    HTML

    <html>
  <body>
    <div class='container'>
      <div class='row'>
        <div class='col1 cols'></div>
        <div class='col2 cols'></div>
        <div class='col3 cols'></div>
      </div>
    </div>
  </body>
</html>

    CSS

    * {
    margin: 0;
    padding: 0;
}


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


.container {
    height: 100%;
    margin: 0 auto;
    max-width: 900px;
    width: 98%;
}


.row {
    height: 100%;
    width: 100%;
}


.cols {
    float: left;    
    height: 100%;
    overflow: scroll;
}

.col1, .col3 {
    width: calc(50% - 100px);
    width: -moz-calc(50% - 100px);
    width: -webkit-calc(50% - 100px);
    width: -o-calc(50% - 100px);
}

.col2 {
    background-color: #000;
    width: 200px;
}