How to place DIV elements with images next to each other

Question

I have 5 images that I want to put next to each other, these images is going to become a slider that's going to slide left or right. No matter what I try nothing seems to make it go next to each other. I have tried float:left, position:absolute, display: inline.

here is my html

<div class="slider-wrapper">
                <div class="slider">
                    <div class="portfolio-overlay">

                            <div id="portfolio_0" class="portfolio-active portfolio-single"><img src="images/image1.jpg"></div>
                            <div id="portfolio_1" class="portfolio-inactive portfolio-single"><img src="images/image2.jpg"></div>
                            <div id="portfolio_2" class="portfolio-inactive portfolio-single"><img src="images/image3.jpg"></div>
                            <div id="portfolio_3" class="portfolio-inactive portfolio-single"><img src="images/image4.jpg"></div>
                            <div id="portfolio_4" class="portfolio-inactive portfolio-single"><img src="images/image5.jpg"></div>
                            <div id="portfolio_5" class="portfolio-inactive portfolio-single"><img src="images/image6.jpg"></div>

                    </div>   
                </div>

and this is my css

.slider-wrapper {
padding: 25px 0 0;
}

.portfolio-single {
float: left;
width: 70%;
}

Answer 1

DEMO WITH ANIMATION

DEMO

.slider-wrapper {
  overflow:hidden; /* to remove page scrollbars */
  padding: 25px 0 0;
  white-space:nowrap;
  font-size:0; /* to remove ~4px whitespace */
}

.portfolio-single {
  /*reset fontsize if needed*/
  display:inline-block;
  width:70%;
}
.portfolio-single img{
  vertical-align:top;
  width:100%;
}

Without using align-left we can use on a parent element white-space as nowrap, this will make sure to prevent wrap on inner inline or inline-block elements.

As said above we than need to respectively set the slides to inline-block.

using inline-block on elements they'll be in an inline flow, which means that if in your HTML you have every slide in a new line, a 4px (it's a whitespace!) gap will appear next to each slide.

to remove it use on the parent element font-size:0;

If you plan to have text inside your slides than you'll need to set font-size:16px back to your children slides.

vertical-align:top or any other align value makes sure to place your images at the right vertical place inside their parent containers.