Board layout blips

[Boy_Wonder]

So for some categories I'm working to set them up so they show with a tabbed menu down the side. This is my code so far (yes I'm aware I've not put all the categories in the jquery that are there for tabbed)

{foreach $[category]}

{if $[category.id] == 5}

<div class="cat-tabs-container">

<div class="cat-tabs-left">

<a href="" class="tab-left-category active" id="cat-5">Coastal Highway</a><br />

<a href="" class="tab-left-category" id="cat-8">Mystery Lake</a><br >

<a href="" class="tab-left-category" id="cat-9">Desolation Point</a><br />

<a href="" class="tab-left-category" id="cat-10">Pleasant Valley</a><br />

<a href="" class="tab-left-category" id="cat-11">Timberwolf Mountain</a><br />

</div>

<div class="cat-tabs-display">

$[category.anchor]

<div class="cat-5">

<div class="container boards">

<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>

<div class="content cap-bottom">

$[category.board_list]

</div>

</div>

</div>

{elseif $[category.id] == 8}

$[category.anchor]

<div class="cat-8">{if $[current_user.is_guest]}Please Register or Login to access this location! {else}

<div class="container boards">

<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>

<div class="content cap-bottom">

$[category.board_list]

</div>

</div>{/if}

</div>

{elseif $[category.id] == 9}

$[category.anchor]

<div class="cat-9">

{if $[current_user.is_guest]}Please Register or Login to access this location! {else}

<div class="container boards">

<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>

<div class="content cap-bottom">

$[category.board_list]

</div>

</div>{/if}

</div>

{elseif $[category.id] == 10}

$[category.anchor]

<div class="cat-10">

{if $[current_user.is_guest]}Please Register or Login to access this location! {else}

<div class="container boards">

<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>

<div class="content cap-bottom">

$[category.board_list]

</div>

</div>{/if}

</div>

{elseif $[category.id] == 11}

$[category.anchor]

<div class="cat-11">

{if $[current_user.is_guest]}Please Register or Login to access this location! {else}

<div class="container boards">

<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>

<div class="content cap-bottom">

$[category.board_list]

</div>

</div>{/if}

</div>

</div>

<div style="clear: both;"></div>

</div>

{else}

$[category.anchor]

<div class="container boards">

<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>

<div class="content cap-bottom">

$[category.board_list]

</div>

</div>

{/if}

{/foreach}

And the jquery
<script>

$(document).ready(function(){

$(".cat-8, .cat-9, .cat-10, .cat-11").hide();

$(".cat-5").addClass("current");



$( "#cat-8" ).click(function() {

$(".cat-8").show();

$(".cat-5").hide();

$(".cat-9").hide();

$(".cat-8").addClass("current");

$("#cat-8").addClass("active");

$(".cat-5").removeClass("current");

$(".cat-9").removeClass("current");

$("#cat-9").removeClass("active");

$("#cat-5").removeClass("active");

event.preventDefault();





});

$( "#cat-9" ).click(function() {

$(".cat-9").show();

$(".cat-5").hide();

$(".cat-8").hide();

$(".cat-9").addClass("current");

$("#cat-9").addClass("active");

$(".cat-5").removeClass("current");

$(".cat-8").removeClass("current");

$("#cat-8").removeClass("active");

$("#cat-5").removeClass("active");

event.preventDefault();



});

$( "#cat-5" ).click(function() {

$(".cat-5").show();

$(".cat-9").hide();

$(".cat-8").hide();

$(".cat-5").addClass("current");

$("#cat-5").addClass("active");

$(".cat-9").removeClass("current");

$(".cat-8").removeClass("current");

$("#cat-9").removeClass("active");

$("#cat-8").removeClass("active");

event.preventDefault();



});

$( "#cat-10" ).click(function() {

event.preventDefault();



});

$( "#cat-11" ).click(function() {

event.preventDefault();



});

});

</script>
And finally the css

/*Lets Build the tabbed layout */

.cat-tabs-container {width: 100%;}

.cat-tabs-container:after {

content: '' ;

clear: both;}

.cat-tabs-left {width: 12%; float: left; background-color: #CECECE; padding-bottom: 20px; text-align: right; padding-top: 50px; padding-bottom: 100px;}

.cat-tabs-left a {margin-bottom: 5px;}

.cat-tabs-display {width: 88%; float: left; background-color: #EFEFEF; }

.tab-left-category {font: bold 14px 'Open Sans'; text-transform: uppercase; letter-spacing: 1px; color: #5d5d5d; padding: 10px 15px; background: #ececec; display: inline-block;

height: 20px; max-width: 150px; width: 100%; height: 75px;}

.tab-left-category.active {background-color: #FFFFFF !important; margin-bottom: 5px;}

#cat-5 {background-image: url(http://storage.proboards.com/6744455/images/yeQXmguul0daEImOWhll.png); background-repeat: no-repeat; background-position: center 55px;}

#cat-8 {background-image: url(http://storage.proboards.com/6744455/images/hFskkpicHTwwXeRWbrgo.png); background-repeat: no-repeat; background-position: center 55px;}

#cat-9 {background-image: url(http://storage.proboards.com/6744455/images/mqXTMYqbmqtOnnyaedzk.png); background-repeat: no-repeat; background-position: center 55px;}

#cat-10 {background-image: url(http://storage.proboards.com/6744455/images/eTjxeDPlMEIMCMFxjwTS.png); background-repeat: no-repeat; background-position: center 55px;}

#cat-11 {background-image: url(http://storage.proboards.com/6744455/images/mPWsOovGRLJUnhuhansy.png); background-repeat: no-repeat; background-position: center 55px;}

Now the issue I'm having is the following. 
A) Whichever is the last category it does not wish to display in the category tabs container div. It shows afterwards (which obviously clears the float out so its not floating)
B) I can't clear a float for the other categories so there's no gap between the rp categories and the etc.

Site link is: wearehuman.boards.net/
Tagging: Brian and Peter (Peter because I know I was poking you for advice earlier on ) but anyone can jump on

[Boy_Wonder]

An update - its now showing all the categories as floated left so it's only the B) bit that is now causing issues (not being able to clear the float to create a "gap"

[Boy_Wonder]

BUMP

[Boy_Wonder]

BUMP