im having a layout like this
<body>
<div id="ExternalFrame"><!-- 1 -->
<div id="InnerFrame"><!-- 2 -->
<div id="TopFrame"><!-- 3 -->
<div id="LogoFrame"></div>
</div><!--3 topFrame -->
<div id="TopFrameIn" class="right"><!-- 4 -->
<span class="txt white" style="margin-right:10px;">Welcome Admin</span>
</div><!--4 TopFrameIn-->
<div id="MainContainer">
<div id="SecondTop"></div>
<div id="MainContent" class="fleft"></div>
<div id="sideMenu" class="fright"></div>
<div id="Foot"></div>
</div>
</div><!--1 InnerFrame -->
</div><!--2 ExternalFrame -->
</body>
with the css looking like this
#ExternalFrame{width:100%;}
.white{
color:#FFF;
}
.right{
text-align:right;
}
.fright{
float:right;
}
.fleft{
float:left;
}
.txt{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
}
#SecondTop{
width:800px;
height:150px;
background-color:#FC0;
}
#Foot{
width:800px;
height:300px;
background-color:#FC0;
}
#LogoFrame{
background:url(Img/Logo400px.png);
background-repeat:no-repeat;
width:800px;
height:80px;
}
#TopFrame{
width:800px;
height:80px;
background:url(tiles/TopTile.png);
background-repeat:repeat-x;
}
#TopFrameIn{
width:800px;
height:15px;
background:url(tiles/TopTile2.png);
background-repeat:repeat-x;
}
#InnerFrame{
width:800px;
background-color:#CCC;
margin-left:auto;
margin-right:auto;
}
#MainContainer{
width:800px;
clear:both;
display:block;
padding:0;
margin:auto;
}
#MainContent{
width:600px;
height:400px;
background-color:#900;
}
#sideMenu{
width:200px;
height:400px;
background-color:#03C;
}
the problem is that the #Foot DIV doesnt display and it should do