Overlapping Relative & Footer - Best Practice

Hello

Hoping somebody can help

My site is set to 100% height/ width and everything inside my wrap is a relative element. This is fine but one elemen is overlapping

I can move it to top: 20px which fix’s it but ruins my footer

What’s the best way to go about this?

Create a DIV with the lower problem elements in and absolute position it? (I tried and it ruins the footer)

Example below. Can paste the code snippet if required…

http://www.togganet.co.uk/Rebrand/RB-west-yorkshire-league.html

Hi,

I’m not seeing any overlap on the footer but your fixtures tables are all over the top of the content in the middle!

The reason is that you have given heights to bodycontentleft, bodycontentright and leagueinfo1 and that is the number one mistake to avoid. :slight_smile: You can’t give height to fluid columns that hold text content like that because you simply don’t know what their height will be when the screen is squashed or when the user resizes the text.

Remove the heights from those main column elements and then set your #fixtures1 column to clear:right or it will snag on the column above. Until you do that it won’t be possible to diagnose what other issues are.