1 - My accordion is 3 tabs. When I click the furthest right one it moves below the rest and doesn't come back. How do I stop this?

Well it looks like the div (lrep-blahblah) doesn't see the bar in the way. You have position settings like left: 40px but those don't mean anything to the browser because the div is not positioned (position: relative or position: absolute). You'll find you can set "left" to something ginormous like 500px but it won't move the box. But try a margin-left. That will move the box. margin-left: 45px moves the box just far enough away in my browser. I don't know how this accordion works though so I dunno if that means you'll have to change other margins too.

I suspect the original accordion code set positioning on those divs somewhere, if it also had the left: stuff. Also, you can see the white text part actually is on top of the div correctly, it's just hard to see because the grey background isn't behind it. So it's just a matter of pushing that div away from the left.

2 - Between my league tables is a huge gap, how do I change this (each league table is a separate div). How do I remove this huge gap?

It's actually not a gap. Give those divs with id="lrep-blahblah" a fugly background colour and you'll see they're just that tall. You have an explicit height:500px set in your css... I think you can just remove that, or if you needed height somewhere, change it to min-height and set it to something smaller so your tables get closer together.

You're also likely being hit with a lot of HTML errors, because some of the code is not nice.Probably not causing your current problem(s) but you never know what a browser might do with invalid HTML. Don't do this

This is because you can't put blocks like divs inside p's, so the browser tries to close the p's first. But then the <p></p> leaves a little gap if you have margins, padding, or default line-height/font-size on your p's.

You're loading a script of javascript after each div. Can you just load it once at the bottom of all the divs?

I also happened to notice, maybe because I enlarge my fonts to read stuff, that the main title of the page wraps and gets lost:

The last word "forum" wraps to the next line, but the next line is covered by the boxes with the League Bio in it. It might not be wrapping for you, but there are probably as many computers that think they need to wrap that text as not. Also there is not such tag as h9, they only go up to h6. I think "Huddersfield & District Association" would be a good h1, since that seems to be the "title" of the page, and I would just use a normal p for the CLICK HERE and use CSS to make it look all big, since I wouldn't call it a header.

I can't see "Huddersfield" without thinking of that Maiden song "sheriff of huddersfield", sorry

Well it looks like the div (lrep-blahblah) doesn't see the bar in the way. You have position settings like left: 40px but those don't mean anything to the browser because the div is not positioned (position: relative or position: absolute). You'll find you can set "left" to something ginormous like 500px but it won't move the box. But try a margin-left. That will move the box. margin-left: 45px moves the box just far enough away in my browser. I don't know how this accordion works though so I dunno if that means you'll have to change other margins too.

I suspect the original accordion code set positioning on those divs somewhere, if it also had the left: stuff. Also, you can see the white text part actually is on top of the div correctly, it's just hard to see because the grey background isn't behind it. So it's just a matter of pushing that div away from the left.

It's actually not a gap. Give those divs with id="lrep-blahblah" a fugly background colour and you'll see they're just that tall. You have an explicit height:500px set in your css... I think you can just remove that, or if you needed height somewhere, change it to min-height and set it to something smaller so your tables get closer together.

You're also likely being hit with a lot of HTML errors, because some of the code is not nice.Probably not causing your current problem(s) but you never know what a browser might do with invalid HTML. Don't do this

Premier Division

Premier Division

This is because you can't put blocks like divs inside p's, so the browser tries to close the p's first. But then the <p></p> leaves a little gap if you have margins, padding, or default line-height/font-size on your p's.

You're loading a script of javascript after each div. Can you just load it once at the bottom of all the divs?

I also happened to notice, maybe because I enlarge my fonts to read stuff, that the main title of the page wraps and gets lost:

The last word "forum" wraps to the next line, but the next line is covered by the boxes with the League Bio in it. It might not be wrapping for you, but there are probably as many computers that think they need to wrap that text as not. Also there is not such tag as h9, they only go up to h6. I think "Huddersfield & District Association" would be a good h1, since that seems to be the "title" of the page, and I would just use a normal p for the CLICK HERE and use CSS to make it look all big, since I wouldn't call it a header.

I can't see "Huddersfield" without thinking of that Maiden song "sheriff of huddersfield", sorry

Wow what a fantastic post! I'll have a good read this evening when I'm back from the office