Overlappende Widgets in WordPress Thema

Hallo, ik zal me eerst even voorstellen.

Ik ben Danny, 24 jaar oud en doe al ongeveer 13 ICT.
Ik ben begonnen met ICT als hobby en heb 2 jaar studie gedaan aan het ROC.
Voor de rest ben ik momenteel helaas werkloos, daarvoor ben ik 5 jaar lang Elektromonteur in de OV geweest maar wegens verhuizing en daardoor ontslag ben ik dus momenteel werkloos.
Over het algemeen ben ik meer van de hardware kant, maar de laatste tijd is webdesign me steeds meer gaan boeien, helaas ontbreekt er nog wat kennis waardoor ik zo nu en dan vast loop, vandaar mijn oproep.

Ik zit dus met een probleem.

Ik heb een WordPress thema verbouwd naar mijn likes en wensen, maar zit met nog een enkel probleem waar ik stapelgek van wordt.

Ik draai een Tube site, en heb rondom op mijn mainpage, pagina template en post template onder de content 5 widget gebieden.

1 gebied over de gehele breedte van de pagina, en daaronder 4 widget gebieden naast elkaar.
Nu is het zo dat in FireFox, de widgetgebieden netjes gesorteerd zijn zoals het moet, maar zodra ik IE open om te testen dan wordt gebied 1 (boven de 4 andere gebieden die daaronder horen te staan) over de 4 widgetgebieden eronder geplaatst.

Ook op mobiele apparaten wordt de layout niet goed weergeven.

Nu heb ik dus 5 gebieden extra aangemaakt, in zowel de stylesheet, de templates en de functions.php file.

Ik heb geen idee waardoor het komt, dus ik hoop dat iemand hier de fout ziet die ik heb gemaakt en mij kan helpen de fout te corrigeren.

STYLESHEET:

#below-full-content {
background: #ffffff;
width: 100%;
height: 270px;
text-align: center;
}

#below-content-container {
background: #FFFFFF;
width: 100%;
height: 510px;
text-align: center;
}

#bsub-cont-main {
width: 960px;
margin-left: auto;
margin-right: auto;
background: #ffffff;
padding: 5px 0 5px 0;
}

#bsub-cont-1 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}

#bsub-cont-2 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}

#bsub-cont-3 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}

#bsub-cont-4 {
width: 240px;
height: 250px;
float: left;
margin: auto;
padding: 0px;
background-color: #ffffff;
}

Templates alle 3 hetzelfde:

blablabla... begin van widgetgebieden:

<?php <div id="below-content-container">
<div id="below-full-content">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Below Full Content') ) : ?>
<?php endif; ?>
</div>

<div id="bsub-cont-main">
<div id="bsub-cont-1">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 1') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
<div id="bsub-cont-2">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 2') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
<div id="bsub-cont-3">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 3') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
<div id="bsub-cont-4">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Above Footer Ad 4') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
</div>
</div>

<?php get_footer(); ?>
?>

De rest van de code is niet relevant.

Het gekke is dat FireFox deze fout dus blijkbaar corrigeert en IE niet.

Ik hoop dat iemand hierbij kan helpen.

Gr. Danny