Overlapping Content From the first Div to the second Div when the window is resized

Question

This is a site I am trying to build http://sorchus.com/securestuff/buggy/home/

The normal layout is fine but when you have a re-size the window the contend of home div overlaps the t_sol div.

How to fix that?

Html:

<div id="home" class="tabs">
    <div id="scfix">
        <ul id="slider">
            <li>
                <div id="home_cnt">
                    <h1>pan-asian social media training specialists</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, debitis mollitia corporis illo dolore doloribus eius dolorum laudantium quod minus porro repellendus laboriosam facilis nemo ut sapiente amet nesciunt vitae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, </p>
                    <h2>Hop in! Learn more &#x25B6</h2>
                </div>
            </li>               
        </ul>
    </div>
</div>
<br>
<div id="t_sol" class="tabs">
    <div id="scfix">
        <h2>Re-Define Yourslelf?</h2>
        <img src="../cdn_images/stocks/corporate-team.jpg">
        <h3>Our Tailored Solutions</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, quas, temporibus, esse illo doloribus maiores eligendi perferendis expedita dolore nihil molestiae veritatis distinctio cupiditate porro excepturi debitis consequuntur. Ducimus, recusandae.</p>
        <h4>Learn More.. &#x25B6</h4>
    </div>
</div>

CSS

img {
  width: 100%;
  height: 100%;
}

/*font Smoothing*/
html,
html a {
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  font-smooth: always;
}

/*eof Font Smooting*/
#background {
  background-repeat: no-repeat;
  content: "";
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  /*height: 100% !important;*/
  width: 100% !important;
  z-index: -5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

html,
body {
  height: 100%;
}

.tabs {
  border: 1px solid #bada55;
}
#scfix {
  height: 100% !important;
  width: 100% !important;
}

#home {
  background-color: rgba(255, 140, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.8);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: visible;
}

#footer {
  background-color: orange;
  height: auto;
}

/*Home Content*/
#home_cnt h1 {
  clear: both;
  font-family: "sansationbold", "calibri";
  font-size: 50px;
  text-align: center;
  text-transform: uppercase;
  padding-top: 150px;
  color: rgba(255, 255, 255, 0.8);
  color: rgba(0, 0, 0, 0.9); /*text-shadow:  7px 7px 7px rgba(150, 150, 150, 0.81);
*/
}

#home_cnt h1:after {
  clear: both;
  content: " ";
  display: block;
  width: 800px;
  height: 1px;
  margin: 20px auto 24px;
  padding: 0;

  background-image: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-image: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-image: -o-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-image: -ms-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-image: linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0, rgba(255, 255, 255, 0)),
    color-stop(0.5, rgba(255, 255, 255, 0.6)),
    color-stop(1, rgba(255, 255, 255, 0))
  );
}

#home_cnt p {
  clear: both;
  width: 80% !important;
  color: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.9);
  font-size: 30px;
  font-family: "sansationlight", "calibri";
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

#home_cnt h2 {
  clear: both;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  margin-top: 20px;
  color: white;
  font-size: 30px;
  font-family: "sansationregular", "calibri";
  background: #f89600;
  vertical-align: middle;
  padding: 10px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/*eof Home Contend*/
#t_sol {
  /*
width: 80%!important;*/
  clear: both;
}

#t_sol img {
  position: absolute;
  z-index: 5;
  width: 60% !important;
  height: auto;
  float: left;
}

#t_sol h2 {
  margin-left: auto;
  margin-right: auto;
  padding-top: 52px;
  font-size: 50px;
  text-align: center;
  font-size: 45px;
  font-family: "sansationbold", "calibri";
  text-transform: uppercase;
  /*text-shadow: 0 1px 1px rgba(0,0,0,0.2);*/
}

#t_sol h3 {
  font-size: 30px;
  font-family: "sansationregular", "calibri";
  padding: 10px;
  text-transform: uppercase;
  width: 30%;
  float: right;
  margin-top: 137px;
  /*text-shadow: 0 1px 1px rgba(0,0,0,0.2);*/
}

#t_sol p {
  clear: both;
  font-family: "sansationregular", "calibri";
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  font-size: 20px;
  width: 35% !important;
  text-align: justify;
  float: right;
  padding-right: 35px;
}

#t_sol h4 {
  clear: both;
  float: right;
  width: 100%;
  text-align: right;
  margin-top: 20px;
  color: white;
  font-size: 30px;
  font-family: "sansationregular", "calibri";
  background: #f89600;
  vertical-align: middle;
  padding: 10px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

  margin-left: auto;
  margin-right: auto;
}

/*Tailored Solutions*/

/*eof Tailored Solutions*/
/*Slider*/
#slider {
  list-style-type: none;
}

#slider li {
  display: inline;
}

/*eof Slider*/
/*footer*/
#top {
  height: 250px;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  font-family: "sansationregular";
}

#top a,
#top a:after,
#top a:visited {
  color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
}

#top a:hover {
  text-decoration: underline;
}

#top ul {
  padding-left: 15px;
  padding-top: 20px;
}

#top ul li {
  padding-left: 20px;
  line-height: 30px;
}

#top h3 {
  font-weight: 1000;
  padding-bottom: 10px;
  font-family: "sansationbold";
  text-transform: uppercase;
}

#footoplist {
  height: 250px;
  width: 30%;
  float: left;
  margin-right: auto;
  margin-right: auto;
  /*padding-bottom: 30px;*/
  /*margin-bottom: 10px;*/
}

#break {
  height: 1px !important;
  width: 100% !important;
  background-color: rgba(255, 255, 255, 0.5);
}
#bottom {
  clear: both;
  height: 110px !important;
  width: 80% !important;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  bottom: 0;
}

#bottom #txt {
  float: left;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  padding: 10px 0 0 25px;
  color: white;
  font-family: "sansationregular";
}

#bottom ul {
  height: auto;
  width: auto;
  padding-bottom: 10px;
}

#bottom ul li {
  display: inline;
  padding-right: 10px;
  color: rgba(0, 0, 0, 0.6);
}

#bottom img {
  width: 200px;
  height: auto;
  padding-top: 20px;
  float: left;
}

#bottom h4 {
  clear: both;
  color: rgba(0, 0, 0, 1);
  padding-bottom: 10px;
}

#bottom a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  font-family: "sansationregular";
}