CODEWITHSUNDEEP
htmlcss
Alen
Alen

Reputation: 917

Position multiple sections side by side

I'm trying to make a website which have multiple sections positioned side by side, then user have two buttons for scrolling left and right. All sections must have width and height 100% so content is full-screen.

I managed to position two sections but the problem is I have to keep adding more and more sections and all those sections should appear on right side of the last section.

I believe I have wrong approach so I need your help.

<div class="wrap">
    <section class="first">
        <section class="section">
            <img src="image1.jpg">
        </section>

        <section class="section">
            <img src="image2.jpg">
        </section>
    </section>

    <section class="second">
        <section class="section1">
            <img src="image3.jpg">
        </section>
    </section>
        ... the rest of sections
</div>

//css

.wrap{
    display: inline-block;
    white-space: nowrap;
    overflow-x: auto; 
}

.first{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
 }

.second{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
}

.section{
    background-color: black;
    float: left;
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}

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

.section1{
    background-color: black;
    float: left;
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}

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

So this is some kind of portfolio website, every main section represents one project, and inside project I have to display images, which are full-screen.

I hope you understand me.

Upvotes: 0

Views: 1518

Answers (1)

toast
toast

Reputation: 670

I'm not sure this is what you're after, but I've managed to get 4 next to each other.

Check this fiddle as example: http://jsfiddle.net/vBPyL/

Adding left: 100%, left: 200%, left: 300% etc seems to do the trick

.fourth{
    width: 100%;
    height: 100%;
    position:absolute;
    top: 0;
    left: 300%;  
    display: table-cell;
}

It worked back to IE9, but of course, IE8 doesn't support html5 tags, I digress.

Hope this helps

Upvotes: 1

Related Questions