CODEWITHSUNDEEP
htmlcss
Robin
Robin

Reputation: 11

Fixed footer falls over content

I need to make a simple CSS website. But I have a problem with my fixed footer. It falls over my buttons. I have tried making it an inline-block element. Then it stays right under the buttons. But when I resize the page it goes over my brandstory class. Is there any way to fix this problem? I'm new to CSS. 

.main-navigation li{
    display: inline-block;
    margin: 0.1% 1%;
    padding: 0%;
}

a{
    color: white;
    text-decoration: none;
}

.current{
    text-decoration: underline;
}

.brandstory{
    position: absolute;
    margin-right: 25%;
    height: 500px;
}

img{
    width: 25%;
    margin-left: 75%;
    display: block;
}

.item-of-the-month{
    color: black;
}

.text-block{
    margin-left: 75%;
    border: 1px solid black;
    margin-top: 0%;
    padding-top: 1%;
    padding-bottom: 1%;
    background: white;
    text-align: center;
}

.buttons{
    margin-left: 75%;
}

.button{
    background-color: #000;
    border: 1px solid red;
    margin-top: -1.2%;
    padding: 1%;
    color: white;
    font-family: Georgia,Times,Times New Roman,serif;  
    text-align: center;
    text-decoration: none;
    display: block;
}

.ForwardFashion{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: left;
}
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
        <title>ForwardFashion</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    
    <body>
        <div class="header">
            <h1>ForwardFashion</h1>
        </div>
        
        <div class="main-navigation">

                <li><a href="#" class="current"><h3>Home</h3></a></li>
                <li><a href="#"><h3>Interviews</h3></a></li>
                <li><a href="#"><h3>Webshop</h3></a></li>
        </div>
        
    <div class="brandstory">
        <p>ForwardFashion is sinds 2018 de place to be, als het gaat om upcoming fashionhypes. ForwardFashion biedt naast fashionnieuws ook de allerhipste fashionitems aan. Daarnaast interviewen designers en influencers met een forward-kijk op fashion. ForwardFashion is niet voor niets Forward. Waar andere fashionsites in het verleden blijven hangen, kijken wij verder. Wij schuwen niet voor mode met technologie. Dat zou jij ook niet moeten doen! Dus waar wacht je op, kijk rond in onze webshop, ga lekker zitten voor een interview en blijf op de hoogte in ForwardFashionland.</p>
    </div>
        
    <div class="container">
        <img src="images/glassboots.jpg"> 
        <div class="text-block">
            <a href="#" class="item-of-the-month"><h4>Item of the Month</h4></a>
        </div>
    </div>
        
        <div class="buttons">
             <a href="#" class="button">Instagram</a>
             <a href="#" class="button">Youtube</a>
             <a href="#" class="button">Pinterest</a>
             <a href="#" class="button">Twitter</a>
        </div> 
        
    <footer class="ForwardFashion">
        <p>&copy; ForwardFashion</p>
    </footer> 
        
   </body>
</html>

Upvotes: 1

Views: 34

Answers (1)

Aryan Twanju
Aryan Twanju

Reputation: 2516

One thing you need to consider when you are making your footer fixed is, you have to leave some space in <body> element so that the fixed footer gets some space to avoid it overlapping the content part. Try this code

body {
  padding-bottom: 100px;
}

Upvotes: 1

Related Questions