• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 398
  • Last Modified:

CSS for footer

Hello, could you please look at my code? The question is the footer is not on the right place. It is just right the header rather than the context.
CSS:
body {
margin: 0;
padding:0; 
background: #fff;
}

#headercontent
{
    background-position: left top;
    width: 100%;
    height: 70px;
    margin: 0;
    border: solid #333;
    border-width: 0 0 2px 0;
    background-color: #FF9900;
}

#leftcontent {
width: 15%;
float: left;
color: #000;
padding: 5px;
}

#rightcontent {
float: right;
width: 80%;
padding: 20px;
}


#footer
{
    border: 2px solid #008000;
}

Open in new window

Master page:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">   
<div id="headercontent">

<h1>TEST PAGE</h1>
</div>

<div id="rightcontent">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
</div>

<div id="leftcontent">
<a href=”page1.aspx”>Page 1</a><br />
<a href=”page2.aspx”>Page 2</a><br />
<a href=”page3.aspx”>Page 3</a><br />
<a href=”page4.aspx”>Page 4</a><br />
<a href=”page5.aspx”>Page 5</a><br />
</div>
<div id="footer"><p>copyright 2011</p></div>
  </form>
</body>
</html>

Open in new window

The snap shot:

Thanks for help. snapshot
0
zhshqzyc
Asked:
zhshqzyc
2 Solutions
 
Paul SmartCommented:
Have you previewed your code yet?

Because it looks fine to me.....
(see screenshot)
testcode.png
0
 
zhshqzycAuthor Commented:
But if you view it in browser, you will find...
0
 
jtwcsCommented:
Update your footer style declaration to this,

#footer
{
     clear: both;
     border: 2px solid #008000;
}
0
 
Jen0910Commented:
jtwcs nailed it. You always need to clear your floats ;) You should also add a clear after each horizontal section of your document (header, main content, sub-main content, footer, etc) to clear your floats. I usually do it that way instead of adding it to the actual CSS rule because on random projects i have seen that do odd things with positioning and even spacing in IE 7 and 8.

General clearing div:

<div style="clear:both;"></style>

Open in new window


I'd mark up your HTML body like this:

<body>
    <form id="form1" runat="server">   
<div id="headercontent">

<h1>TEST PAGE</h1>
</div>
<div style="clear:both;"></style>
<div id="rightcontent">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
</div>

<div id="leftcontent">
<a href=”page1.aspx”>Page 1</a><br />
<a href=”page2.aspx”>Page 2</a><br />
<a href=”page3.aspx”>Page 3</a><br />
<a href=”page4.aspx”>Page 4</a><br />
<a href=”page5.aspx”>Page 5</a><br />
</div>
<div style="clear:both;"></style>
<div id="footer"><p>copyright 2011</p></div>
  </form>
</body>

Open in new window


I placed a clear after your page's h1 tag as i imagine you are using that as a header area and may have more content up there in the future.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now