CODEWITHSUNDEEP
css
codibez
codibez

Reputation: 33

How to get rid of extra space on the footer?

I am currently working on a footer for my website and whenever I put something inside of the footer class there seems to be some space below everything that I am unsure on how to get rid of. I would just like the footer to be 'cut' or end after my elements that are inside of it.

You can view my website that I am referring to live here.
The extra space that I am referring to is here.

footer.php 

    <div class="footer">
        <div class="footer_elements">
            <div class="useful_resources">
                <h1>Useful Resources</h1>
                    <p><a href="index.php">home</a></p>
                    <p><a href="#">graphics</a></p>
                    <p><a href="#">web</a></p>
                    <p><a href="#">contact</a></p>
            </div>
            <?php include 'includes/modules/connect.php' ?>
            <?php include 'includes/modules/newsletter.php' ?>

        </div>
    </div>

    </body>

Styles.css :

.footer{width: 100%; max-width: 100%; height: 20px; margin-top: -50px; border-bottom: 30px solid #23262B;}
.footer_elements{font-family: 'Raleway', sans-serif;}
.footer_elements h1{font-size: 26px;}
.footer_elements p{font-size: 18px;}
.footer_elements p{margin-top: -10px;}
.useful_resources{padding: 35px; color: white; float: left;}
.useful_resources a{color: white; text-decoration: none;}
.useful_resources a:hover{color: #CC7A29;}

.connect{padding: 35px; color: white; overflow: hidden;}
.connect a{color: white; text-decoration: none;}
.connect img{width: 35px; float: left; margin-top: -2px;}
.connect_bg{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;}
.connect_bg:hover{background-color: #7AA3CC;}
.connect_bg p{padding: 5px;}
.connect_bg2{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;}
.connect_bg2:hover{background-color: #1F5C99;}
.connect_bg2 p{padding: 5px;}
.connect_bg3{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;}
.connect_bg3:hover{background-color: red;}
.connect_bg3 p{padding: 5px;}
.connect_bg3 img{margin-top: -7px;}
.connect_bg4{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;}
.connect_bg4:hover{background-color: #FF99CC;}
.connect_bg4 p{padding: 5px;}

.newsletter {margin-left: 25px; padding: 15px; width: 500px; border: 2px dashed white; border-radius: 30px; background-color: #393C40; font-family: 'Raleway', sans-serif; color: white; max-width: 600px; }
.newsletter:hover{background-color: #1F5C99;}
.newsletter p{font-size: 14px; margin-left: 25px; margin-top: -35px;}
.heading{margin-left: 125px;}

If anymore details are needed I can provide them. Thank you in advance to anyone that has a possible solution to the extra space in the footer.

Best regards, Codi

Upvotes: 0

Views: 55

Answers (1)

LeFex
LeFex

Reputation: 258

I'm not sure, but I think that the extra space you are refering to is caused by your div with the class "square". Its height attribute, "100%", is adding the total height of the original page to the bottom.

Upvotes: 1

Related Questions