CODEWITHSUNDEEP
htmlcss
Jeremy W
Jeremy W

Reputation: 58

How do I make a DIV tag stretch to the size of it's children?

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*/

Upvotes: 0

Views: 2102

Answers (4)

emijayne
emijayne

Reputation: 46

You used two separate heights for your "videoBox" inside content.. one in CSS and one in HTML.

Simply removing height: 328px; from the videoBox in your css will work to stop the overlap.

Upvotes: 2

Alex Morales
Alex Morales

Reputation: 1191

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.

Upvotes: 0

HMartch
HMartch

Reputation: 728

You have explicit heights defined in the styles for your .description and .keyFeatures classes which, I'm guessing, are the containers where the variable content would go. That's why it's not expanding, remove those heights.

Upvotes: 0

Dale
Dale

Reputation: 10469

You could try changing this

<div class="content" id="home">
    <div class="videoBox"><img class="largeBlock" height="500" /></div>
    <div class="description"></div>
    <div class="keyFeatures"></div>
</div>

to

<div class="content" id="home">
    <div class="videoBox"><img class="largeBlock" height="500" /></div>
    <div class="description"></div>
    <div class="keyFeatures"></div>
    <div class="clear"></div>
</div>

Edit: fixed a typo.. my bad

Upvotes: 1

Related Questions