Question

Having a strange problem with a page set to 100% fluid width which has floating directory category sections and titles.

http://www.inside-guides.co.uk/brentwood/business-directory/index.html

The problem is when the screen resolution is below e.g. 1024px (or when a larger e.g. 1280px window is minimised past a certain resolution), the category titles disappear down to the next level and I have no idea why.

If you visit the directory page and minimise the window to 1024px, you will see the titles drop down and the top categories are left with no titles. Help would be much appreciated!

Here’s the CSS:

/* Business Dir */
.bus-dir {clear:left;}
.bus-dir .logo {padding-top:3px;line-height:0;float:left;width:40px;height:70px;overflow:hidden;}
.bus-dir h2 a {width:90%;color:#242672;line-height:1.25;font-size:19px;float:left;}
.bus-dir p{margin:0}
.bus-dir .subcats {float:none;padding-bottom:20px;line-height:1.5;font-size:15px;}
#dir-left {float:left;width:47%;margin:0 2.3% 0 0.7%;}
#dir-right {float:left;width:48%;}
.bus_dir p, .bus_dir a {margin:1.5em 0 2em;clear:both;}

Answer 1

Removing the float from the anchor tag in your category h2s should fix it