Question

Been customising a store and having a bit of a problem. Think its with CSS but can’t work it out. Theres a gab between the sort select box and the search results, there’s no padding, or margin, using the same layout for the category display same code no problems.

http://www.amazing-web-design.co.uk/staging/devilish/index.php?route=product/search&keyword=ipod

Can you have a look in case i have missed something all help appreciated 🙂

Thanks
Joe

Answer 1

The reason you have the gap between the sort select box and search results is beacuse you are floating elements and in order to clear them, you are using the “extra mark-up” method. This causes the gap. In your particular situation, do the following.

<div class="sort">
<div class="clear"></div>

First delete the div.clear. This will remove the gap. However this will also cause the below div to get effected and ovrelap because you are floating as follows.

div.sort {float: right;}

Now clear the float as follows.

div#dkProductList {clear: right;}

Now you will see that the div id=”dkProductList” is exactly below the div class=”sort” and the gap is gone. If you want some gap between the two, just add some margin, for example:

div#dkProductList {margin-top: 10px;}

This completely solves your problem. There are other ways also, for example instead of using extra markup such as you have used div class=”clear” that you have used to “nullfie” the effects of float, you could use the “overflow” property with a value of “auto”. In this way there will be no need for the extra markup.

Tested in IE9, FF4.01, GG11, AF5.0.5 and Opera 11.