CODEWITHSUNDEEP
htmlcss
ChaseHardin
ChaseHardin

Reputation: 2269

Page Will Not Expand with DIV

I am trying to create a page that will resize with my main content div. Currently, when I set my content div to height: 1000px, it runs over my footer divs. How do I change this so that it expands with my content div?

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Page Layout</title>
    <link rel="stylesheet" type="text/css" href="../styles/layout.css">
</head>
    <body>
    <div class="top">
    </div>
        <div class="left">

        </div>
        <div class="right">

            <div class="content">
                <h1>Page Content</h1>
            </div>
        </div>
        <div class="preFooter">

        </div>
        <div class="myFooter">

        </div>
    </body>
</html>

CSS:

*{
    margin-left: 0;
    margin-right: 0;

    margin-top: 0;
    margin-bottom: 0;
}

html,body { height:100%; }

h1{
    text-align: center;
    padding: 5px;
}

.left{
    float: left;
    width: 20%;
    background-color: #757475;
    height: 100%;
}

.right{
    float: right;
    width: 80%;
    background-color: #e9eaed;
    height: 100%;
}

.top{
    overflow : hidden;
    height: 10%;
    background-color: #333333;
    width: 100%;
}

.preFooter{
    overflow : hidden;
    height: 20%;
    background-color: #ffffff;
    width: 100%;
}

.myFooter{
    overflow: hidden;
    height: 40%;
    background-color: #333333;
    width: 100%;
}

.content{
    margin-top: 5%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    height: 1000px;
    border-radius: 25px;
}

Upvotes: 0

Views: 53

Answers (2)

whaley
whaley

Reputation: 645

Don't set a height to .left and .right. This way the contents will decide how tall to make an element.

Here's a JSFiddle.

The reason it doesn't fill up the entire height of the page is because other elements on the page (the content div) have a fixed height set to 1000 pixels. You'd also have to do what Rob said and use a clearfix, or drop floats all together and use flexbox, which is new and great! See the second link below:

Here's another. I started this from scratch, maybe it will seem more straight forward this way.

Upvotes: 1

Rob
Rob

Reputation: 15160

Your containing element for .content is .right which is floated. Floated elements are never contained by their parent elements. That is why it expands beyond the bottom of the element.

Upvotes: 2

Related Questions