CODEWITHSUNDEEP
htmlcss
Ewubbs
Ewubbs

Reputation: 21

Footer sits at bottom of window, not page. What am I doing wrong?

I've looked up similar questions, and none of the resolutions seem to be fit for my issue. I've got floats that push past the page, and when I load in the footer, it'll sit at the bottom of where the web page initially ends, before scrolling down. Help!

UPDATE: I've removed the

position: fixed

, and have tried a few other things. Anything else I try still ends up sitting the footer at the bottom of the window, and am able to simply scroll past it. Any other suggestions or code edits to try?

Also, curious about "not using negative margins", as that's what I used to structure most of it. How can I restructure it using something else without completely getting rid of what I have? Thanks

html:

<!DOCTYPE html>


<head>
<meta charset="utf-8" />
<link href = "../Design/Designwork.css" type="text/css" rel="Stylesheet">
<title>Interactive Site</title>

</head>
    <body>

        <header>
            <div id="navbar">
                    <ul>
                        <li><a href="#">Forum</a></li>
                        <li><a href="#">Videos</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">More</a></li>
                    </ul>
            </div>
            <div id="textlogo">
                <h2><a type="logo" href="#">Gamers Forum</a></h2>
            </div>
        </header>
        <div class="square">Hi, I'm your console</div>
        <div class="square2"></div>

        <div class="view1"></div>
    </div>
        <footer>
        <div id="footer">

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

css:

        header {
background-color: hsl(0, 67%, 37%);
padding: 10px 40px;
width: 90%;
margin: auto;
background-position: fixed;

    }

    #navbar {
display: inline;
        font-family: webfont, sans-serif;
word-spacing: 45px;
    }

    li {
    display: inline-block;}

    a {
        color: white;
        text-decoration: none;
        font-size: 40px;
        letter-spacing: 2px;
        color: white; 
        font-weight: 200px;
    }
        #navbar, li, a {
            text-indent: 60px;
        text-align: right;}


        h2 {
        font-family: futurblock, sans-serif !important;
        font-size: 30px !important;
        letter-spacing: 0em !important;
        margin-top: -65px;
        color: white;
        font-weight: 250px;
        }

        body {
        background-color: #336666;
        margin: 0 auto;}

    a #logo {
    color: black !important;}

    a:hover {
        color: black;
    font-style: italic;}

    a:active {
        color: yellow;
    font-style: none;}

    .center {
    margin: 0 auto;}

    .square {
        width: 65%;
    background-color: #993333;
    margin: 0 auto;
    position: center;
    margin-top: 75px;
    margin-right: 250px;
    padding-bottom: 45%;
    box-shadow: 0 0 15px #000;}



        .square2 {
            width: 40%;
            padding-bottom: 40%;
            background-color: #333;
            position: center;
            margin-top: -820px;
            margin-left: 650px;
            box-shadow: 0 0 10px #000;
        }



        .square {
            font-family: ivyjournal, sans-serif;
            font-size: 50px;
            font-weight: 5em;
            text-indent: 350px;
            vertical-align: text-bottom;
            color: #333;
            text-shadow: 1px 1px #000;

        }

        .view1 {
            width: 450px;
            padding-bottom: 10%;
            background-color: #fff;
            position: center;
            margin: 0 auto;
            margin-top: -600px;
            margin-right: 650px;
            height: 200px;
            box-shadow: 0 0 5px #000;


        }

            #footer {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 30px;
                background-color: #333;
            clear: both;

            }

Sorry, the code could definitely be better organized. I'm still learning!

Upvotes: 0

Views: 101

Answers (5)

DaVoD Hoseiny
DaVoD Hoseiny

Reputation: 141

in the selector #footer, you just change position from absolute to relative . like this:

#footer {
            position: relative;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background-color: #333;
        clear: both;
        }

Upvotes: 0

Akash Jain
Akash Jain

Reputation: 730

So as Johannes have pointed out it's your position:absolute, there are two ways to overcome it either remove it completely(pointed by Johannes) or add position :relative to the parent , also the footer is not closed properly.

also some tips, always try to make sure parent contain the child and instead of margin you can use positions or floats (if your using floats add overflow:hidden or floats to the parent element as well)

here is link to help you

https://developer.mozilla.org/kab/docs/Web/HTML

Upvotes: 1

victorbergstroem
victorbergstroem

Reputation: 1

An element with position absolute, is positioned relative to the first parent element that has position relative. So if a child has position absolute, the parent position static and the grandparent position relative, the child will be positioned relative to the grandparent. In your case, if the body element has position relative, your footer (with position absolute) will position itself at the bottom of the body element.

Upvotes: -1

Johannes
Johannes

Reputation: 67748

Just remove position: absolute; from the CSS rule for your footer, which will put it into the regular document flow.

You can also erase the position settings bottom and left then - they are meaningless if there is no relative, absolute or fixed position.

And finally, don't use negative margin settings if you are not fully aware of what effect they will have. (i.e. move their elements, possibly overlapping other elements.

Upvotes: 2

Mario Amandio
Mario Amandio

Reputation: 62

I'm affraid, your issue it's on the class view1, on your css, you have

.view1 { margin-top:-600px }

Upvotes: -1

Related Questions