Three divs side by side causing problems

Question

So, what I ultimately want to achieve is this:

https://s17.postimg.org/7zkpt511r/imgdivs.png

what I have so far:

<style type="text/css">
.wrapper{
  height: 100%;
  width: 100%;
}
.left{
  float: left;
  background: silver;
  height: 100%;
}
.right{
 background: silver;
  float: right;
  height: 100%;
}
canvas{
position: absolute;
height: 100%;
}
</style>


<div class = "wrapper">
  <div class = "left"></div>
  <canvas id="canvas"></canvas>
  <div class = "right">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var WIDTH = 200; //could be anything, comes from previous calculations
$('#canvas').css("width", WIDTH);
$('#canvas').css("left", (window.innerWidth - WIDTH) / 2);
$('.left').css("width", (window.innerWidth - WIDTH) / 2);
$('.right').css("width", (window.innerWidth - WIDTH) / 2);

var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, WIDTH, window.innerHeight);

</script>

So a little explanation, the canvas in the middle is dynamic in it's width(calculated with javascript) and pre-decided with it's height(100%), it is placed in the middle of the page, and the two divs to it's sides should stretch accordingly and equally and fill the rest of the page. I have many problems in my code; the divs sometimes overflow one below another, the canvas for some reason doesn't fillStyle it's whole dimension and so on.

I am afraid to try to do it in flexbox since old browsers do not support it properly, and I need all browsers support. Thank you for your time.

To get proper fill use: http://stackoverflow.com/questions/27736288/how-to-fill-the-whole-canvas-with-specific-color I've removed floats and position:absolute from canvas since you don't need it (placed all in css table): https://jsfiddle.net/zd75wq2e/3/ — sinisake, Nov 19 '16 at 15:08

score 0 · Answer 1 · answered Nov 19 '16 at 14:46

0

To get the div height to work you need to add this to your css

html {
  height: 100%;
}
body {
  min-height: 100%;
}

answered Nov 19 '16 at 14:46

Ben

345
2
10

Kamae · Answer 2 · 2016-11-19T15:30:31.317

0

I've been trying in this jsfiddle and I get a working solution. I added a float:left; to the wrapper and I removed all the height: 100%; because they're ignored by the browser. I just set the height according to the window element using JS.

I removed as well the position: absolute; on the canvas because is not needed to do what you need. Anyway if you need it for other purposes, my suggestion is then insert the canvas inside a div class="center" (for example) and apply the position absolute to the canvas inside that div.

Finally I added as well a $(document).ready(function(){ ... }); to ensure the JS code is executed when the page is completely loaded.

EDIT: The divs calculation is made using width: calc(50% - canvasWidth/2);,this way it is working as well when you resize the window. But I thing the most important thing is working using WIDTH is producing your error, but getting the $("#canvas").outerWidth() is working fine...

edited Nov 19 '16 at 15:30

answered Nov 19 '16 at 15:04

Kamae

541
2
9
19

It overflows in my browser, see evidence: https://s21.postimg.org/xn6in6i9j/51x.png – user7182273 Nov 19 '16 at 15:08
WTF... Sorry it wasn't in mine O.o This means is some weird random thing, let me try to figure it out – Kamae Nov 19 '16 at 15:10
The only thing is if the px of the `window` element are odd, then you can see a px separation between `canvas` and `divs`... but I'm still improving it. – Kamae Nov 19 '16 at 15:19
Please check it now, I simplified the code and it seems to be working, at least in my Chrome and IE11. I eddited as well my post – Kamae Nov 19 '16 at 15:30

score 0 · Answer 3 · answered Nov 19 '16 at 15:11

Dont use position:absolute's it is not a good pratice for layouts

You can consider using display:flex for the same and consider using viewport width and height vw/vh

When you give your div width 100% and height 100% nothing gets effected to make it work you have to set html,body{width:100%,height:100%} which is not a good practice ,instead you can use vw/vh

check this snippet

.wrapper {
  height: 100vh;
  border: 1px solid black;
  display: flex;
  width: 100vw;
}
.left {
  border-right: 1px solid;
  background: silver;
  height: 100%;
  width: 20%;
}
.right {
  background: silver;
  width: 30%;
  height: 100%;
  border-left: 1px solid;
}
canvas {
  width: 60%;
  height: 100%;
}

<div class="wrapper">
  <div class="left"></div>
  <canvas id="canvas"></canvas>
  <div class="right">
  </div>

Solution without display:flex

.wrapper {
  height: 100vh;
  border: 1px solid black;
  position: relative;
  width: 100vw;
}
.left {
  border-right: 1px solid;
  background: silver;
  height: 100%;
  width: 20%;
  position: absolute;
  left: 0;
}
.right {
  background: silver;
  width: 30%;
  height: 100%;
  border-left: 1px solid;
  float: right;
}
canvas {
  width: 60%;
  height: 100%;
}

<div class="wrapper">
  <div class="left"></div>
  <canvas id="canvas"></canvas>
  <div class="right">
  </div>

Hope it helps

Hey, the canvas width should come within javascript not css since it can vary from anything to anything, secondly there is a weird problem when I fill with color the entire canvas with your code(white spot): https://s16.postimg.org/6auq89sj9/53x.png — user7182273, Nov 19 '16 at 15:22

score 0 · Answer 4 · answered Nov 19 '16 at 15:24

CSS:

body {
  margin:0;
  height:100vh;
}
.wrapper{
 display:table;

  height: 100%;
  width: 100%;
 background-color:pink;
}
.left{
 display:table-cell;
  background-color: gray;
  height: 100%;

}
.right{
 background-color: blue;
display:table-cell;
  height: 100%;

}
canvas{
display:table-cell;
height: 100%;
}

JS:

var WIDTH = 234; //could be anything, comes from previous calculations
$('#canvas').css("width", WIDTH+'px');
$('.left').css("width", (window.innerWidth - WIDTH) / 2+'px');
$('.right').css("width", (window.innerWidth - WIDTH) / 2+'px');


var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

DEMO: https://jsfiddle.net/zd75wq2e/4/

So, basically, you was close. I've removed absolute positioning and floats, and i've rather used css table. I hope it has good support in older browsers, too. And, yes, as mentioned in comment, fill problem is solved in last line of js.

It seem to work on modern browsers... but the ones who have KitKat and jellyBean display it poorly. — user7182273, Nov 19 '16 at 15:39
@user7182273, for older mobile browsers, you can try with floats. But add float to canvas div, too, rather than absolute positioning... — sinisake, Nov 19 '16 at 15:44

Three divs side by side causing problems

4 Answers4