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

Question

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

98 Views Asked by JasonDavis At 04 April 2025 at 14:28

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.stack.imgur.com/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

Original Q&A

There are 4 best solutions below

Ashish Mehta On 25 June 2015 at 05:01

CSS Width: calc()

.wrapper{
   width: 100%;
}
.column-a, .column-c{
   width: calc(50% - 100px);
}
.column-b{
  width: 200px;
}

If browser doesn't support the calc expression using jquery

$('.column-a, .column-c').css('width', '50%').css('width', '-=100px');

amit singh On 25 June 2015 at 05:01

Inspect the width of wrapper div while you resizing the window. If the width of wrapper div is fixed for all resolutions then it will be fine for all screens even if you resize the screen. In your case it seems that your wrapper div width is changing for different resolutions. Please check it. (This issue is something related to responsive layout i guess)

The CSS written in the above answer can work and you can use max-width=900px; for the wrapper with with width=100% .

Neville Hillyer On 25 June 2015 at 20:46

You may wish to use the following 3 column layout which has a fixed width centre column and equal width flexible left and right columns.

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Three column layout</title>
<style>
body { margin: 0; overflow: hidden }
#W { position: absolute; width: 900px }
#X { position: absolute; height: 600px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px 110px 0 9px; left: 0; right: 50% }
#Y { position: absolute; height: 600px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px -100px 0 -100px; left: 50%; right: 50% }
#Z { position: absolute; height: 600px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px 9px 0 110px; left: 50%; right: 0 }
</style>
<div id=W>
<div id=X>
Left content
</div>
<div id=Y>
Middle content
</div>
<div id=Z>
Right content
</div>
</div>

**Shuvro** · Accepted Answer

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;
}

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

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in X-EDITABLE

Trending Questions

Popular # Hahtags

Popular Questions