I recently delved into creating a simple website using HTML5 and have successfully set up the site structure. Everything has been smooth sailing so far.
However, I've encountered a section of the site that seems to have a mind of its own.
When I assign a height to this particular section, it moves to the top of the article, appearing behind the top two sections while keeping the content within the section 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 issue lies with the section labeled "clients-box" (the very last section).
Here is the corresponding 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;
You can view the live website here: