Why copyright is not coming at bottom?

HTML & CSS
1

Hello,

I made this css code and page layout all is fine except that the copyright is not coming properly at the bottom and instead its coming in the middle of the content. Below is my css and html.

html
{
        background: #73ADD7 url("../images/gradient.gif") repeat-x;
        font-family: Arial,verdana,sans-serif;
        font-size: 12px;
        text-decoration: none;
}

body
{
        padding: 0;
        margin: 0;
}

#wrap
{
        background: url("../images/sky3.jpg") no-repeat center top;
        color: #666;
        width: 100%;
        height: 514px;
}

#content
{
        padding: 7px;
        margin: 0 auto;
        text-align: center;
        border-top: 1px solid #000000;
        border-left: 1px solid #000000;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
}

#footer
{
        padding: 10px;
        text-align: center;
        font-size: 10px;
}

And html:

<!DOCTYPE html>
<html lang="en">

<head>
<link href="./css/default.css" rel="stylesheet" type="text/css" />
<body>
<div id="wrap">
        <div style="height: 148px;"></div>
        <div id="content" style="background-color: #FFFFFF; width: 860px;">
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
        </div>
</div>
<br />
<div id="footer">Copyright &copy; 2010, <?=$settings["sitename"]?></div>


</body>
</html>

Please help to fix.

Thanks.

2

Hi,
Remove the height from your #wrap div.
Then set a bottom margin on it to eliminate the <br /> tag you are using to create space after it.

I also named that anonymous div with height:148px; as “header” and moved the styles to the css.

You will be better off moving your html styles to the body element also. There can be problems sometimes when setting BG images on the html element. By setting it on the body it will paint the html as well.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #73ADD7 url("../images/gradient.gif") repeat-x;
    font-family: Arial,verdana,sans-serif;
    font-size: 12px;
    text-decoration: none;
}
#wrap {
    background: url("../images/sky3.jpg") no-repeat center top;
    color:#666;
    width:100%;
    /*height: 514px;*/
    margin-bottom:20px;/*eliminate br tag*/
}
#header {
    height:148px;
    background:#CCC;
}
#content {
    width:860px;
    margin:0 auto;
    padding:7px;
    text-align:center;
    border:1px solid #000;
    background:#FFF;
}

#footer {
    padding: 10px;
    text-align: center;
    font-size: 10px;
}
</style>

</head>
<body>

<div id="wrap">
        <div id="header"></div>
        <div id="content">
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
                <p>loremp ipsum</p>
        </div>
</div>

<div id="footer">Copyright &copy; 2010, <?=$settings["sitename"]?></div>

</body>
</html>
3

Hi,

Sorry i fixed it. Thanks for your help!

Thanks.

4

Hi,

Sorry the solution i found isn’t working properly. I specified the height but if there is more content then height is not increasing by itself. So the background image named: sky3.jpg is a pic of height: 500px and its a picture that must be displayed whether content is there or not.

How to do it ?

Thanks.

5

You could set min-height instead of height thus it will allow for expansion :).

IE6 will need height set instead


#element{min-height:500px;
background:url(whatever.jpg);}

* html #element{height:500px;/*IE6*/}
6

Hi,

Excellent. Working like a charm.

Thanks.

7

You’re welcome :).