[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

CSS for footer

Posted on 2011-09-20
4
Medium Priority
?
394 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 1000 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 1000 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

650 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