css layout issue when setting a section height - css

Question

I am writing a basic website in HTML5, i have all the site structure in place and so far everything has been working well.
However I have one section that seem to go off on its own a bit.
as soon as I had a height to the section the sections moves to the top of the article behind the top two section where the actual content within the section stays in place.
<article><section class="welcome-box">
<section class="welcome-wrapper">
<div class="welcome-hello">
<div class="welcome-hellotext">HELLO, WELCOME TO SAA RECRUITMENT </div>
</div>
<div class="welcome-line"></div>
<div class="welcome-textbox">
<div class="welcome-textboxtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
</div>
<div class="welcome-button">
<div class="welcome-buttontext">READ MORE</div>
</div>
</section>
</section>
<section class="home-slider">
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
<img src="images/slide_1.jpg" alt="" />
</div>
<div class="slide2">
<img src="images/slide_2.jpg" alt="" />
</div>
<div class="slide3">
<img src="images/slide_3.jpg" alt="" />
</div>
<div class="slide4">
<img src="images/slide_4.jpg" alt="" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
</section>
<!-- Slider Script -->
<script type="text/javascript">
$(document).ready(function() {
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
<!-- End Slider Script -->
<section class="about-box">
<div class="about-boxtitle">TITLE HERE</div>
<div class="about-boxline"></div>
<div class="about-boxtext"></div>
</section>
<section class="news-box">
<div class="news-boxtitle">NEWS</div>
<div class="news-boxline"></div>
<div class="news-boxtext"></div>
</section>
<section class="clients-box">
<div class="clients-boxtitle">CLIENTS</div>
<div class="clients">client</div>
<div class="clients">client</div>
<div class="clients">client</div>
</section>
</article>
The section I am having trouble with is the one with a class of "clients-box" (very last section)
Here is the CSS:
.clients-box {
width: 960px;
margin-top: 10px;
background-color: #FFF;
}
ul.clients {
width: 940px;
height: 40px;
margin: 0 auto 0;
}
ul.clients li.client {
width: 150px;
height: 40px;
display: inline-block;
background-color: #039;
clear: both;
The website is live here: http://dev.saarecruitment.com/

Answer 1

.clients-box needs either float: left or float: right. You can add margin: 10px auto to center it with 10px top/bottom margins.

Answer 2

You have used float on all the above <sections> which means that they are not occupying space. Thus this box got to the top, under the floated elements.
Easiest way would be to apply a float: left to this box as well.
An alternative method, inspired by #Mr. Alien would be to just apply clear:left to this block.