Question

How would I go about putting two slickgrid tables side by side? Right now, I’m simply creating two grids using grid = new Slick.Grid…, but I have to use hardcoded dimensions in CSS like:

#dynamic1 { /*this is grid one*/
  position: absolute;
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

#dynamic2 { /*grid two*/
  position: absolute;
  top: 120px;
  left: 750px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

Which is not fun. And it isn’t dynamic. If possible, it would also be nice if I can get them side by side, with a combined width that expands to fill the ENTIRE browser window.

Edit: It’s fixed! Here’s the new code:

#dynamic1 {
float: left;
width: 49%;
position: absolute;
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

#dynamic2 { /*grid two*/
  float: right;
  width: 50%;
  position: absolute;

  top: 120px;

  right: 0px;
  bottom: 0px;
  height:500px;
}

Answer 1

position: absolute;
  **float: left;**
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

#dynamic2 { /*grid two*/
   **float: right;**
  position: absolute;
  top: 120px;
  left: 750px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

You just need to add a float left and float right. You can assign them whatever combination of widths that equals 100%. Example:

position: absolute;
  **float: left;**
  **width: 45%;**
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height:500px;
}

#dynamic2 { /*grid two*/
   **float: right;**
  **width: 55%;**
  position: absolute;
  top: 120px;
  left: 750px;
  right: 0px;
  bottom: 0px;
  height:500px;
}