'Fix three div's at the bottom of the page

My footer is in fixed position and I am seeing the same view on every device. I also want to fix the LinkedIn logo in white div and orange div above it. So that my website will have same view on every device. but I am not to fix them. Can anyone please help?. I have been trying from last 2 weeks. I am not able to add my codes here. so attaching the same in screenshot html code css code

This how my website currently looks like//i.stack.imgur.com/VNVDN.jpg

This is how I want my website to look like//i.stack.imgur.com/VNVDN.jpg

htmlcss


Solution 1:[1]

Actually I made an easy template of what you need. It is pretty simple so I am sure that you will get the point. Please ask me whatever you want.

HTML

    <div class="footer-wrapper">
        <div class="orange-container">

        </div>
        <div class="social-container">
            <img src="#">
        </div>
        <div class="black-container">
            <p>text text text</p>
            <p>text text text</p>
        </div>
    </div>

CSS

    .footer-wrapper {
        width: 100%;
        height: 100px;
        margin: 0px;
        padding: 0px;
        position: relative;
        bottom: 0;
    }
    .orange-container {
        width: 100%;
        height: 40px;
        background: orange;
    }
    .social-container {
        width:100%;
        display: flex;
        justify-content: center;
    }
    .social-container img {
        background: red;
        width: 30px;
        height: 30px;
    }
    .black-container {
        width: 100%;
        background: black;
        padding-top: 1rem;
        color: white;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .black-container p {
        text-align: center;
        margin: 0;
    }

It is better way to use display:flex or display:grid when you want to center something. Padding is used to make small spaces. Also with the display flex or grid you can easily handle the responsive view of your website pretty easy.

Please I am also advising you to check how to make your questions good Click Here

I hope my answer will be helpful for you, and again if not, don't hesitate to ask anything :)

Solution 2:[2]

You can use flexbox. And assign to the main part flex-grow.

* {
  padding: 0px;
  margin: 0px;
}
.w {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;  
}
.header {
  background: orange;  
  padding: 5px;
}

.main {
  flex-grow: 1;  
}

.footer {
  background: black;
  height: 40px;
  text-align: center;
  color: white;
  padding: 5px;
}
<div class="w">
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="footer">footer</div>  
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Maik Lowrey

Related Questions