Hi everyone,

I have recently been working on the skinning for the site www.kyrlaw.com.cy but having problems with the footer pane, which seems to creep up underneath the right pane. (see http://www.kyrlaw.com.cy/Whoweare/App... or http://www.kyrlaw.com.cy/News.aspx)

The skins for this site are as follows: home.ascx (skin.css), internal.ascx (internal.css), employees.ascx (employees.css) and news.ascx (news.css).

The home and employees skins are working fine.  The footer problem appears only in the other 2 skins.  See below the news.css and news. ascx as an example:

--------------------------------------
news.ascx
--------------------------------------
<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.UI.Skins" Assembly="DotNetNuke" %>

<div id="Wrap">
    <div id="Header">
        <div id="Logo">
            <dnn:LOGO runat="server" id="dnnLOGO"  />
        </div>
    </div>
    <div id="Menu">
        <dnn:NAV runat="server" ID="dnnNAV" ProviderName="DDRMenuNavigationProvider" IndicateChildren="False" ControlOrientation="Horizontal" CSSControl="NavMenu">
            <CustomAttributes>
                <dnn:CustomAttribute Name="effect" Value="slide"/>
                <dnn:CustomAttribute Name="effectOptions" Value="{percent:200}"/>
                <dnn:CustomAttribute Name="effectSpeed" Value="slow"/>
            </CustomAttributes>
        </dnn:NAV>
    </div>
    <div id="Breadcrumbs">
        <dnn:TEXT runat="server" id="dnnTEXT"  CssClass="breadcrumb_text" Text="YOU ARE HERE:" ResourceKey="Breadcrumb" />&nbsp;<dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB"  CssClass="breadcrumb_links" RootLevel="0" Separator="&nbsp;>&nbsp;" />
    </div>
    <div id="TopPane">
        <div id="TopPane" runat="server"></div>
    </div>
    <div id="Middle">
        <div id="ContentPane">
            <div id="ContentPane" runat="server"></div>
        </div>
        <div id="RightPane">
            <div id="RightPane" runat="server"></div>
        </div>
    </div>
    <div id="Footer">
        <div id="FooterPane" runat="server"></div>
    </div>
</div>
<div id="ControlPanel" runat="server"></div>

---------------------------------------------------------------------
news.css (left out the header, logo and breadcrumbs sections)
-------------------------------------------------------------------------

#TopPane
{
      clear: both;
    margin: 5px 0px 0px 0px;
        width: 100%;
}

#Middle
{
    width: 100%;
    margin: 5px 0px 5px 0px;
}

#ContentPane
{
        float: left;
    margin: 0px 10px 0px 0px;
    padding: 0px;
    width: 680px;
}

#RightPane
{
    float: right;
    margin: 0px 0px 0px 0px;
    width: 270px;
}


#Footer

{ 
    clear:both;
    margin: 1px 0px 20px 0px;
    padding: 10px 0px 0px 0px;
    border-top-style:dotted;
    border-top-width: 1px;
    border-top-color: #dcdcdc;
     width: 100%;
    height: 80px;
}
-------------------------------------------------------------

Any ideas as to what might be going wrong?