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

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

CodePudding user response：

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 >
        <div >

        </div>
        <div >
            <img src="#">
        </div>
        <div >
            <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 :)

CodePudding user response：

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 >
  <div >header</div>
  <div >main</div>
  <div >footer</div>  
</div>