Horizontal Scrolling Multiple Columns

by Rhys

HTML

<header id="header" class="header-border">
  <div id="logo-group">
  </div>

</header>
<div id="main-kanban">
  <div id="content-kanban">
    <div id="kanban-header">
     Header stuff
    </div>

    <div id="board-container">
      <section id="kanban-board" data-board-id="3366691d-a6bd-e511-9be7-0021cc6e12a5">
        <input id="Id" name="Id" type="hidden" value="3366691d-a6bd-e511-9be7-0021cc6e12a5">

        <div class="kanban-individual">
          <div class="kanban-list" data-list-id="292d361e-5ebe-e511-9be8-081196549bf0" data-board-id="3366691d-a6bd-e511-9be7-0021cc6e12a5">
            <form action="/Kanban/SelectBoard" class="form-heading" method="post" novalidate="novalidate">
              <div class="kanban-column">
                <div class="kanban-board-heading">
                  <span class="kanban-heading-text">
                        <input class="heading-textbox valid" data-val="true" data-val-length="The field Name must be a string with a minimum length of 1 and a maximum length of 100." data-val-length-max="100" data-val-length-min="1" data-val-required="The Name field is required." id="Name" name="Name" tabindex="-1" type="text" value="List 1" aria-invalid="false">
						<span class="colorPicker">
							<a class="color">
								<div class="colorInner"><i class="fa light fa-inverse fa-tint fa-fw"></i></div>
							</a>
							<div class="track" style="background-image: none;"><canvas width="150" height="150"></canvas></div>
							<input type="hidden" class="colorInput">
						</span>
                  </span>
                </div>
                <ul class="kanban-draggable list-unstyled ui-sortable" data-list-id="292d361e-5ebe-e511-9be8-081196549bf0">

                  <li class="list-group-item cursor-pointer kanban-card no-padding" data-card-id="16357" data-order="0">
                    <span class="card-details">
        <i class="fa fa-fw fa-arrows ui-sortable-handle"></i>
        <span class="list-group-item-heading">Action 3...

CSS

div#main-kanban {
  top: 49px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  bottom: 52px;
}

div#content-kanban {
  position: absolute;
  left: 0;
  right: 0px;
  overflow: hidden;
  height: 100%;
  overflow-x: auto;
  background: #e3e3e3;
}

div#board-container {
  width: 1500px;
  top: 49px;
  position: absolute;
  height: 100%;
  overflow: hidden;
}

section#kanban-board {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  margin-bottom: 49px;
}

div.kanban-individual {
  display: inline-block;
  vertical-align: top;
  width: 320px;
  overflow-y: scroll;
  height: 100%;
  float: left;
  background-color: #e3e3e3;
  cursor: pointer;
  -webkit-transition: background 0.3s linear;
  -moz-transition: background 0.3s linear;
  -o-transition: background 0.3s linear;
  -ms-transition: background 0.3s linear;
  transition: background 0.3s linear;
}

.fixed-header #header {
  position: fixed;
  width: 100%;
  z-index: 905;
  top: 0px;
  border-bottom: 2px solid #999999;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: -11px 12px 23px rgba(0, 0, 0, 0.1);
}

.smart-style-1 #header {
  background-image: none;
  background-color: #22262e;
}

#header {
  display: block;
  height: 49px;
  margin: 0;
  padding: 0 13px 0 0;
  background-color: #f3f3f3;
  background-image: -moz-linear-gradient(top, #f3f3f3, #e2e2e2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
  background-image: -webkit-linear-gradient(top, #f3f3f3, #e2e2e2);
  background-image: -o-linear-gradient(top, #f3f3f3, #e2e2e2);
  background-image: linear-gradient(to bottom, #f3f3f3, #e2e2e2);
  background-repeat: repeat-x;
  position: relative;
  z-index: 905;
}

.header-border {
  border-bottom: 3px solid #c02631 !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}