Solved

CSS for footer

Posted on 2011-09-20
4
378 Views
Last Modified: 2012-05-12
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
Comment
Question by:zhshqzyc
4 Comments
 
LVL 5

Expert Comment

by:Paul Smart
ID: 36570031
Have you previewed your code yet?

Because it looks fine to me.....
(see screenshot)
testcode.png
0
 

Author Comment

by:zhshqzyc
ID: 36570062
But if you view it in browser, you will find...
0
 
LVL 10

Accepted Solution

by:
jtwcs earned 250 total points
ID: 36570069
Update your footer style declaration to this,

#footer
{
     clear: both;
     border: 2px solid #008000;
}
0
 
LVL 8

Assisted Solution

by:Jen0910
Jen0910 earned 250 total points
ID: 36570170
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now