Making Tabs with CSS and Javascript work : <p>I have tried to make the snippet work somewhat. I'm just starting out with this and I have only currently designed it for my phone. You can see the problem by clicking on projects and today.</p>

<p>I have a div(<code>#data-container</code>) which consists of two divs(<code>.project, .today</code>) and I want those two divs to be side by side acting like tabs. So, that when I click on their respective button it swipes and shows the respective div. I've got it working but with 2 problems.</p>

<p><strong>How they work</strong> - The <code>#data-container</code> has <code>white-space: nowrap</code>(child divs won't wrap and stay side by side and the sliding will work) and it's child div's(<code>.project and .today</code>) are set to <code>width: 100%</code> and <code>inline-block</code>. </p>

<p><strong>Problems with this</strong></p>

<ol>
<li><p>The <code>data-container</code> needs to be able to scroll vertically and can wrap text around the currently selected div but <code>white-space: nowrap</code> makes the text overflow. I have tried <code>word-wrap: break-word</code>, it doesn't work. I can also make it work by setting the <code>display: hidden</code> but I want the divs to swipe.</p></li>
<li><p>I don't understand why this problem is happening. When I set the <code>#data-container</code> to <code>overflow-y: scroll</code>, it makes the divs horizontally scroll able which breaks the whole system. </p></li>
</ol>

<p>I need a way to make the <code>data-container</code> only vertically scroll able and to wrap text.</p>

<p><strong>Jade</strong></p>

<pre><code>extends ./layout.jade

block content
    #maindiv
        .sidebar
            #profile
                img(src= ' #{image} ', width=40, height=40)
                span #{name}
            ul
                li Home
                li +Project
                li +Task
                li Reminders
                li Statistics
                li Settings
                li Help
                li
                    a(href='/logout') Log Out
        header
            span ☰
            h1 LifeHub
        .container
            .navbar
                .navbar-inside-one.below
                    h2 Projects
                .navbar-inside-two.above
                    h2 Today
            #data-container
                .project
                    p It's lonely here. You should add some projects.
                .today
                    input#task(type='text', placeholder='+ Add a New Task', autocomplete='off')
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.container {
  position: relative; }

.below {
  z-index: 0;
  box-shadow: 0;
  background-color: white;
  color: black; }

.above {
  z-index: 1;
  box-shadow: 2px 2px 2px 1px #b0b0b0;
  background-color: #26A69A;
  color: white; }

#data-container {
  position: relative;
  height: 93%;
  overflow-y: scroll;
  white-space: nowrap;
  width: 100%;
  z-index: 0; }

.navbar {
  text-align: center;
  font-size: 26px;
  height: 7%;
  min-height: 50px; }

.navbar-inside-one, .navbar-inside-two {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 100%;
  padding: 10px 10px 10px 10px; }

.project, .today {
  display: inline-block;
  position: relative;
  width: 100%;
  word-wrap: break-all;
  font-size: 28px;
  line-height: 1.63em; }
</code></pre>

<p>Animating with Javascript</p>

<pre><code>    $('.navbar-inside-two').click(function() {
        $(".project, .today").animate({left: "-" + $("#data-container").width()}, 200);
        $(".navbar-inside-one").removeClass('below').addClass('above');
        $(this).removeClass('above').addClass('below');
    });

    $('.navbar-inside-one').click(function() {
        $(".project, .today").animate({left: "0"}, 200);
        $(".navbar-inside-two").removeClass('below').addClass('above');
        $(this).removeClass('above').addClass('below');
    });
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

  //Height function for container and sidebar
  (function() {
    $(".container, .sidebar").height($("#maindiv").height() - $('header').height());
    $(".sidebar").css('top', 49); //TO BE MADE AGAIN
  })();

  $('span').click(function() {
    var sidebar = $('.sidebar').css('left').replace(/([a-z])\w+/g, '');
    if (sidebar &lt; 0) {
      $('.sidebar').animate({
        'left': '0px'
      }, 200);
      $('.container').animate({
        'left': '150px'
      }, 200)
    } else {
      $('.sidebar').animate({
        'left': '-150px'
      }, 200);
      $('.container').animate({
        'left': '0px'
      }, 200)
    }
  });

  $('.navbar-inside-two').click(function() {
    $(".project, .today").animate({
      left: "-" + $("#data-container").width()
    }, 200);
    $(".navbar-inside-one").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });

  $('.navbar-inside-one').click(function() {
    $(".project, .today").animate({
      left: "0"
    }, 200);
    $(".navbar-inside-two").removeClass('below').addClass('above');
    $(this).removeClass('above').addClass('below');
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Messed up Css from multiple Sass files */

.font-head,
.navbar,
.sidebar {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  letter-spacing: 2.2px;
}
.font-para,
input[type='text'] {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 100;
  letter-spacing: 1.4px;
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: 'Source Sans Pro', sans-serif;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
header {
  width: 100%;
  background-color: #1a70c5;
  padding: 10px;
}
span {
  box-sizing: border-box;
  position: relative;
  font-size: 28px;
  color: #F8F8F8;
}
h1 {
  font-family: 'Poiret One', cursive;
  letter-spacing: 2.2px;
  margin-left: 10px;
  color: white;
  font-size: 28px;
  display: inline-block;
}
.container {
  position: relative;
}
.below {
  z-index: 0;
  box-shadow: 0;
  background-color: white;
  color: black;
}
.above {
  z-index: 1;
  box-shadow: 2px 2px 2px 1px #b0b0b0;
  background-color: #26A69A;
  color: white;
}
#data-container {
  position: relative;
  height: 93%;
  overflow-y: scroll;
  white-space: nowrap;
  width: 100%;
  z-index: 0;
}
.navbar {
  text-align: center;
  font-size: 26px;
  height: 7%;
  min-height: 50px;
}
.navbar-inside-one,
.navbar-inside-two {
  position: relative;
  display: inline-block;
  width: 46%;
  height: 100%;
  padding: 10px 10px 10px 10px;
}
.project,
.today {
  display: inline-block;
  position: relative;
  width: 100%;
  word-wrap: break-all;
  font-size: 24px;
  line-height: 1.63em;
  padding: 20px
}
input[type='text'] {
  position: static;
  border: none;
  background: transparent;
  font-size: 16px;
  line-height: 16px;
  width: 100%;
  height: 30px;
  color: black;
}
input[type='text']:focus {
  outline: none;
  border: none;
}
::-webkit-input-placeholder {
  color: #D9D9D9;
}
::-webkit-scrollbar {
  display: none;
}
#maindiv {
  width: 400px;
  height: 550px;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-30%);
  transform: translateX(-50%) translateY(-30%);
  overflow: hidden;
}
.sidebar {
  position: fixed;
  left: -155px;
  height: 100%;
  bottom: 0px;
  width: 150px;
  background: #333;
}
.sidebar ul {
  padding: 0px 5px;
}
.sidebar li {
  color: #F7F7F7;
  font-weight: 100;
  font-size: 22px;
  text-align: center;
  margin-top: 30px;
}
.sidebar li:first-child {
  margin-top: 10px;
}
#profile {
  height: 50px;
  width: 98%;
  margin-top: 10px;
}
#profile img {
  vertical-align: middle;
  border: 1px solid #333;
  border-radius: 100%;
}
#profile span {
  display: inline-block;
  padding: 5px 0px 0px 10px;
  color: white;
  font-size: 18px;
}
@media (max-width: 450px) {
  #maindiv {
    width: 100%;
    height: 100%;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="maindiv"&gt;
  &lt;div class="sidebar"&gt;
    &lt;div id="profile"&gt;
      &lt;img src="something.jpg" width="40" height="40" /&gt;&lt;span&gt;Derp&lt;/span&gt;
    &lt;/div&gt;
    &lt;ul&gt;
      &lt;li&gt;Home&lt;/li&gt;
      &lt;li&gt;+Project&lt;/li&gt;
      &lt;li&gt;+Task&lt;/li&gt;
      &lt;li&gt;Reminders&lt;/li&gt;
      &lt;li&gt;Statistics&lt;/li&gt;
      &lt;li&gt;Settings&lt;/li&gt;
      &lt;li&gt;Help&lt;/li&gt;
      &lt;li&gt;&lt;a href="/logout"&gt;Log Out&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;header&gt;&lt;span&gt;☰&lt;/span&gt;
    &lt;h1&gt;Derp Title&lt;/h1&gt;
  &lt;/header&gt;
  &lt;div class="container"&gt;
    &lt;div class="navbar"&gt;
      &lt;div class="navbar-inside-one below"&gt;
        &lt;h2&gt;Projects&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="navbar-inside-two above"&gt;
        &lt;h2&gt;Today&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="data-container"&gt;
      &lt;div class="project"&gt;
        &lt;p&gt;Stupid paragraph dosen't wrap when supposed to&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="today"&gt;
        &lt;input id="task" type="text" placeholder="+ Add a New Task" autocomplete="off" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>
