Home/ Questions/Q 7813823
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T04:59:33+00:00

I have a div tag with content in it, and I want it to

  • 0

I have a div tag with content in it, and I want it to expand so my footer always follows it. As it is, My content tag isn’t expanding, and my footer is overlapping my content. How can I make the div expand and push down my footer?

Here is my HTML:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="Stylesheet" href="images/Main.css"" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="container">
            <div class="header">
                <div class="logo" id="logo"></div>
                <div class="socialNetworkingButtons"> </div>
                <div class="languageSelector"><a href="#"></a></div>
                <div class="headerBanner"></div>
                <div class="icons"></div>
                <div class="hr"><hr /></div>
            </div>
            <div class="content" id="home">
                <div class="videoBox"><img class="largeBlock" height="500" /></div>
                <div class="description"></div>
                <div class="keyFeatures"></div>
            </div>
            <br class="clear" />
            <div class="footer">
                <div class="copyright"><p>Here is some text</p></div>
            </div>
        </div>
        </form>
    </body>
    </html>

And my CSS:

 html, body {
    width: 100%;
    height: 100%;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    background: #fff;
    margin: 0;
    padding: 0;
}

img, div {
    border: none;
}

span {
    margin:0;
    padding: 0;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: #000;
    text-decoration: underline;    
}

.clear {
    clear: both;
}

/* contains all content on the page */
.container {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0px;
    clear:both;
}

/* begin header css */
.header {
    position: relative;
    top: 0px;
    left: 33px;
    width: 956px;
    height: 290px;
    display: block;
}

.logo {
    position: relative;
    top: 0px;
    left: 0px;
    width: 143px;
    height: 83px;
}

.socialNetworkingButtons {
    position: absolute;
    top: 9px;
    left: 836px;
    width: 120px;
    height: 42px;
    text-align:right;
}

.languageSelector {
    position: absolute;
    top: 51px;
    left: 646px;
    width: 310px;
    height: 32px;
    text-align: right;
}

.headerBanner {
    position: absolute;
    top: 83px;
    left: 0px;
    width: 956px;
    height: 127px;
}

.icons {
    position: absolute;
    width: 956px;
    height: 64px;
    left: 0px;
    top: 210px;
    text-align:center;
}

.icon {
    width: 149px;
    height: 47px;
    display: inline;
    position: relative;
}

hr {
    color: #AF0837;
    background-color: #AF0837;
    height: 7px;
    width: 939px;
    margin: 0 auto;
    border: 0px;
}

div.hr {
    position : absolute;
    top: 275px;
    left: 0px;
    width: 956px;
    height: 6px;
}

/* end header css */

/* begin content css */
.content {
    position: relative;
    margin-top: 6px;
    width: 956px;
    display: block;
    float: left;
    margin-left: 43px;
    clear:both;
}

.videoBox {
    position: relative;
    float:left;
    width: 615px;
    height: 328px;
}

.title {
    position: relative;
    float:right;
    top: 0px;
    width: 341px;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
}

.description {
    position: relative;
    float:right;
    top: 30px;
    width: 341px;
    height: 206px;
}

.keyFeatures {
    position: relative;
    float:right;
    width: 341px;
    height: 102px;
}

/* end content css */

/* begin footer css */

.footer {
    position: relative;
    width: 956px;
    height: 170px;
    left: 33px;
    top: 20px;
    display:block;
    clear:both;
}   

.copyright {
    background-color: #AF0837;
    width: 100%;
    height: 45px;
}

.copyright p{
    width: 100%;
    height: 45px;
    text-align: right;
    margin-top: 10px;
    color: #fff;
}
/* end footer css*/
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Redlena is correct if you don’t need to set an explicit height. If you do need to set an explicit height AND need the parent to stretch, then you should use the ‘min-height’ property in your CSS. Simply change your ‘height’ declarations to use ‘min-height’ and that should fix your problem.

    EDIT:
    You can also try fixing the footer to the bottom of the window. Here’s one way to accomplish this.

    • 0