CODEWITHSUNDEEP
csshtmlcss-float
InjuredCoding
InjuredCoding

Reputation: 430

Nesting Div's to build footer (have tried clear:both)

I'm trying to get the below "container" to be recognized as the wrapper div and take on the height of the other elements. This is so I can dynamically size the other elements and the container resizes placing the footer at the bottom.

I've looked all over (for a couple of hours now!) at the solution and everywhere mentions clear:both or overflow:auto, neither of which seem to be working

Would really love it if some one can point out where I'm going wrong!

<HTML>
<head>

    <style type="text/css"> 
    body {
                text-align: left;
                font-size: small;
        }
    #Layer-2 {
                position: absolute;
                margin-left: -640px;
                left: 50%;
                top: +0px;
                width: 1280px;
                z-index: 2;
            }


    #Layer-3 {
                position: absolute;
                left: 146px;
                top: 33px;
                width: 687px;
                height: 59px;
                z-index: 3;
            }


    #Layer-4 {
                position: absolute;
                left: 157px;
                top: 125px;
                width: 174px;
                height: 843px;
                z-index: 4;
            }


    #Layer-5 {
                position: absolute;
                left: 361px;
                top: 286px;
                width: 776px;
                height: 682px;
                z-index: 5;
                overflow: auto;
            }
    hr {
            display: block; 
            clear: left; 
            margin: -0.66em 0;
            visibility: hidden;
    }

#container {overflow:hidden;}


    </Style>
</head>
<body>
<div id="container">
    <div id="Layer-2">

            <div id="Layer-5"  >
            Hello World
            </div>

            <div id="Layer-4" >
            Hello World 2
            </div>

            <div id="Layer-3" >
            Hows Things today?
            </div>
        <hr>
         <br style="clear: both; height: 0; visibility: hidden;">
    </div>
    <br style="clear: both; height: 0; visibility: hidden;">
</div>  
    <div WIDTH="100%"> Footer </div>

</body>
</html>

Upvotes: 0

Views: 242

Answers (1)

Yoav Kadosh
Yoav Kadosh

Reputation: 5155

here is a fiddle of your code after some corrections. Notice that I have added borders to all the div elements in order to see how everithing is nested. Your "issue" is the position:absolute in all of the divs CSS rule. I have also removed all the z-index rules, because they are no longer neccsary.

Looking at your code, you have some issues that need to be fixed:

  • when you apply position:absolute to an element, it takes the element out of the natural flow, meaning that it will not affect the rest of the elemnts. This is why your footer was at the top of the document.
  • br and hr are empty elements, and should be written like this: <br /> and <hr /> etc.
  • I would reccomend keeping all the css styling in the <style> area instead of having it all over the place with inline style. Eg: instead of <div WIDTH="100%"> use css like #footer {width:100%} and place it in the head of the document or in an external file.
  • overflow:hidden and clear:both should always work. If they dont, check your code for errors.

Upvotes: 1

Related Questions