If your website supports IE10+ and doesn't need to worry about Opera Mini compatibility, you can utilize display: flex. This eliminates the need for extra markup, floats, or clearfix.
When using flex, ensure to set a min-width on the slides that equals the container width minus any margins and padding. Consider any margins and padding applied to the slides within the container (e.g., 5px margin).
HTML:
<div id="slidingWindow">
<div class="slidingSection clearfix">Something something</div>
<div class="slidingSection clearfix">Again something</div>
</div>
CSS:
#slidingWindow {
overflow:hidden;
width: 480px; /* slide width + left and right margins */
height: 500px;
background-color: red;
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
.slidingSection {
margin: 5px;
background-color: green;
width: 470px;
min-width: 470px; /* required */
height: 400px;
}
Below is an adjusted version of your code with reduced size and hover animation to demonstrate functionality:
#slidingWindow {
overflow:hidden;
width: 260px;
height: 300px;
background-color: red;
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
.slidingSection {
margin: 5px;
background-color: green;
width: 250px;
min-width: 250px;
height: 200px;
-webkit-transition: -webkit-transform 750ms;
transition: transform 750ms;
}
#slidingWindow:hover > .slidingSection {
-webkit-transform: -webkit-translate3d(-260px, 0, 0);
transform: translate3d(-260px, 0, 0);
-webkit-transition: -webkit-transform 750ms;
transition: transform 750ms;
}
<div id="slidingWindow">
<div class="slidingSection">Something something</div>
<div class="slidingSection">Again something</div>
</div>