Horizotal scroll issue

Question

I am creating this webpage that has few sections that are scrolled vertically. Each section is 100% in height, so there is one section per time in the viewport. Now I want to achieve the oposite effect as each section should have two sections inside that should be scrolled horizotally(each 100% in width).

Ex. In the jsFiffle the first section has two div's with titles:

We are based in location

and

We2 are based in location

<!-- section I -->
    <div class="section row">
      <div class="section-content">
        <h2>We are company</h2>
        <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
        <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
        <p>Thank you for visiting our website.</p>
      </div>

      <div class="second-content">
        <h2>We2 are company</h2>
        <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
        <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
        <p>Thank you for visiting our website.</p>
      </div>
    </div>
    <!-- end section I -->

Here is my jsFiffle(not quite showing ok because Im using foundation)

Answer 1

If I have understood your correctly, you want something like the following:

http://jsfiddle.net/8Dz9n/

HTML

<div class="section">
    <div class=" row">
        <div class="section-content">
            <h2>We are company</h2>
            <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
            <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
            <p>Thank you for visiting our website.</p>
        </div>

        <div class="second-content">
            <h2>We2 are company</h2>
            <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
            <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
            <p>Thank you for visiting our website.</p>
        </div>
    </div>
</div>

CSS

.section {height:100%; width:100%;}
.row {width:200%; height:100%;}
.section-content, .second-content  {float:left; height:100%; width:50%; background:red;}