Search code examples
htmlcsscss-floatfootersticky-footer

How to set footer below float component?

I have a sticky footer at the end of the web, but on one page where I have a Twitter feed inserted it does not work as I would like. The footer traverses the Twitter feed instead of being located below.

This is the code of the text and the Twitter feed:

<div>   
    <div style="float:left;width:80%;padding-right:20px">
        La Plataforma de Prácticas Externas..
    </div>

    <div style="float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>  
</div>

This is the code of the footer:

<div  align="center" style="position: sticky;width: 100%;bottom: 0%;clear: both;padding-top: 20px;">
    <hr />
    <p class="small">Copyright &copy; <fmt:formatDate value="${date}" pattern="yyyy" /> Footer </b>
</div>

And this is the result:

result

What I want to achieve is that the footer is located below the Twitter feed box

EDIT:

With @Sathiraumesh answer the result is:

result2

The preview I'm looking for would be something like this:

preview

Solution

  • remove the postion: absolute in this code off your application

    <div style="float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

    also remove position: sticky from the footer

    <div align="center" style="position: sticky;width: 100%;bottom: 0;clear: both;padding-top: 20px;">
        <hr />
        <p class="small">Copyright &copy; <fmt:formatDate value="${date}" pattern="yyyy" /> Footer </b>
    </div>

    to bring the twitter box in front add z-index:3 in twitter box

    <div style="z-index:3;float:right;position:absolute;display:inline-block;">
        <a class="twitter-timeline" data-lang="es" data-width="300" data-height="800" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>