There's a puzzling issue here with a simple fix waiting to be uncovered. In the example below, a pixel gap has formed between the bottom of two images and the DIV elements (home-top or home-bottom). How can this bothersome space be eliminated?
.container{
width:80%;
}
.menu{
width:100%;
background:black;
color:white;
text-align:center;
}
.home-top{
background:white;
overflow:hidden;
}
.home-bottom{
background:#EEE;
overflow:hidden;
}
.footer{
width:100%;
background:black;
color:white;
}
.txt-left, .img-left{
width:50%;
float:left;
}
.txt-right, .img-right{
width:50%;
float:left;
}<div class="menu">
menu
</div>
<div class="home-top">
<div class="container">
<h1>home top</h1>
<div class="txt-left">
some text goes here.
</div>
<div class="img-right">
<img src="http://www.webtify.be/elkegeraerts/img/elke_geraerts.png" alt="" width="200" />
</div>
<div class="clear"></div>
</div>
</div>
<div class="home-bottom">
<div class="container">
<h1>home bottom</h1>
<div class="img-left">
<img src="http://www.webtify.be/elkegeraerts/img/boek.png" alt="" width="200" />
</div>
<div class="text-right">
some text goes here.
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
footer
</div>