1

I am having following code for my master page.

The problem is with FOOTER tag.

 <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MASTER_MasterPage"    %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title></title>
 <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<script src="../JS/jq.js" type="text/javascript"></script>
<script src="../JS/jqui.js" type="text/javascript"></script>
<script src="../JS/script.js" type="text/javascript"></script>
<style type="text/css">


    html
    {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    #bigDiv
    {
        margin: auto;
        width: 1000px;
        height: 1000px;
        background-color: rgba(255,255,255,0.5);
    }

    header
    {
        height: 100px;
        background-color: white;
        font-family: "Source sans pro";
    }

    #menu a
    {
        text-decoration: none;
        color: white;
    }

    .menuItem
    {
        width: 20%;
        float: left;
        background-color: gray;
        height: 50px;
        font: normal 18px 'Fjalla One',sans-serif;
        color: white;
        padding-top: 30px;
        text-align: center;
        cursor: pointer;
    }

    #contentMain
    {
        float: left;
        width: 80%;
        background-color: rgba(255,255,255,0);
        height: 100%;
        overflow-y: scroll;
    }

    #content
    {
        height: 800px;
        background-color: rgba(255,255,255,0);
        font-family: "Source sans pro";
    }

    #contentAd
    {
        float: left;
        width: 20%;
        background-color: orange;
        height: 100%;
    }

    footer
    {
        text-align: center;
        background-color: gray;
        font-family: "Source sans pro";
        height:100px
    }

        footer a, label
        {
            text-decoration: none;
            color: white;
        }
</style>

</head>
<body>
<form id="form1" runat="server">
    <div id="bigDiv">
        <header>
            <h1>HR Softwares</h1>
            <h4>Advanced softwares and coaching</h4>
        </header>
        <div id="menu">
            <div class="menuItem">HOME</div>
            <div class="menuItem">SERVICES</div>
            <div class="menuItem">PRODUCTS</div>
            <div class="menuItem">CONTACT US</div>
            <div class="menuItem">NEWS</div>
        </div>
        <div id="content">
            <div id="contentMain">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
            </div>
            <div id="contentAd">
                s
            </div>
        </div>
        <footer>
            <a href="contactus.aspx">Contact us</a>
            <label>| </label>
            <a href="feedback.aspx">Feedback</a>

        </footer>
    </div>

</form>
</body>
</html>

Whenever I try to set the height of FOOTER, height of footer goes behind the CONTENT and CONTENTMAIN divs, I want it to appear below the CONTENT div, but its not working.

For testing purpose, I have set opacity of CONTENT and CONTENTMAIN to 0 so that You can see height of FOOTER behind that. I want FOOTER to appear as per the flow and below CONTENT div.

Update:

clear:both in footer solved my problem. Thanks all anyway

2
  • Change your contentMain and contentAd ids height as 90%
    – Dineshkani
    Jan 7, 2013 at 6:20
  • use float:left; in footer and #content then try it isn't a big issue. Jan 7, 2013 at 6:49

1 Answer 1

0

try this i hope this will help for u. CSS

.footer
    {
        text-align: center;
        background-color: gray;
        font-family: "Source sans pro";
        height:100px
    }

HTML

<div class="footer">
            <a href="contactus.aspx">Contact us</a>
            <label>| </label>
            <a href="feedback.aspx">Feedback</a>

        </div>
2
  • I want to use footer tag only. So dont want to use DIV. Jan 7, 2013 at 7:04
  • try to do this with full page. I am facing problem with full page. Jan 7, 2013 at 7:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.