Clever Geek Handbook

Need to set the exact width of the DIV in the middle column with the percentage bases of the right and left DIV and set the height

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

All this will be the MOdal pop-up located on the screen.

The top full-width pane is for the task title. The left column is for the task description, and in the lower left corner there is a fixed DIV to hold the Edit Task Task button.

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

The Right column will contain the task / comment activity stream. At the bottom right at the bottom is a fixed DIV that will contain a comment form to create new comments

http://i.imgur.com/Vq5Ad66.png enter image description here

This is what I'm building ....

enter image description here

The reason why I am asking for help in building the structure of what it appears I have already built is because ...

My Task modal DIV currently has% width for all three columns ...

Once I set my middle column to Fixed 200px wide, it then starts splitting my wight column showing large spaces as I expand my browser and resize.

enter image description here

+3


source to share


4 answers


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

and check here the code in fiddle - 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;
}
+2


source


CSS Width: calc() 

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


If browser doesn't support expression calc

using jquery

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


source


Inspect the width of the wrapper div when resizing the window. If the width of the div is fixed across all resolutions, then it will be fine on all screens, even if you resize the screen. In your case, it seems like the width of your wrapping div changes for different resolutions. Please check it out. (This issue is related to responsive layout I think)

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

0


source


You might want to use the following 3 column layouts, which have a fixed width column and equal widths of the 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>
0


source






More articles:


All Articles