dynamic part of the page breaks the layout

Question

Good day! The following layout which I will post almost works. Almost. A part of the page is being dynamically loaded. If it loads few elements (0/1/2/3) It is alright. If it is more, the footer of the page isn't pushed back. (which basically is the error). I am posting the entire source code. It is configured to work nicely. To see the error itself simply change the value of the CHANGEME variable to something larger than 3.

The source:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>LayoutTest</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .webbody {
            margin: 0 auto;
            padding:0;
            width:900px;
            height:200px;
            max-height:2000px;
        }
        .topHeader {
            width:900px;
            height:50px;
            margin: 0 auto;
            padding:0;
            background:purple;
        }

        .dynamic {
            width:650px;
            height:400px;
            float:left;
        }

        .sidebar {
            margin-left:50px; 
            width:150px;
            height:400px;
            float:left;
            background:red;
        }
        .footer1 {
            float:left;
            margin: 0 auto;
            padding:0;
            width:900px;
            height:20px;
            background:lime;       
        }
    </style>
</head>
<body>
    <div class="webbody">
       <div class="topHeader"></div>   
       <div id="main1" class="dynamic"></div>
       <div class="sidebar"></div>
       <div class="footer1"></div>
    </div>
</body>
</html>
<script>
    //this function only loads the dynamic part of the page
    function load() {
        var main = document.getElementById("main1");
        var CHANGEME = 2;

        for (var i = 0; i < CHANGEME; i++) {
            var slot = document.createElement("div");
            slot.className = "slot";
            main.appendChild(slot);
        }
    }
    load();
</script>

score 0 · Accepted Answer · edited May 23 '17 at 12:11

0

A working example is in this jsfiddle. Basically I have added the following CSS:

#main1 { height: auto; }

I have also added a border around the slot class so you can see what is happening. height: auto is described here

edited May 23 '17 at 12:11

Community

1
1

answered Jul 11 '13 at 07:38

will-hart

3,742
2
38
48

Thank you, sir. This fixed this problem and probably all my future questions regarding the height property! (I will mark this as the answer when the timer expires) – Stanimirovv Jul 11 '13 at 07:40

dynamic part of the page breaks the layout

1 Answers1