Ways to ensure a div remains at the bottom of a page without using a wrapper

Question

Ways to ensure a div remains at the bottom of a page without using a wrapper

I am currently working on my website and this is the content I have in my body tag:

   #social-media {
    width: 175px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10%;
    }
    #social-media img {
    padding: 5px;
    }
    #social-media ul li {
    display: inline;
    }

    <div id="logo"></div>
    <div class="search">
      <form action="search.php" method="get">
      <input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40">
        <input type="submit" value="DRINK!">
      </form>
    </div>

    <div id="social-media"> 
    <img src="facebook2.png">
    <img src="twitter2.png">
    </div>

I am attempting to keep the social-media div pinned to the bottom of the page regardless of the device the user is using. Is it achievable without using a wrapper?

html css

Answer 1

Answer №1

To consistently have it displayed at the bottom of the screen, you can utilize the following CSS:

#social-media {
    position: fixed;
    bottom: 0;
}

You can refer to the positioning documentation on W3Schools by visiting this link.

If you prefer it to always appear at the bottom of the actual page (below other content), consider using this CSS:

#social-media {
    clear: both;
}

Answer 2

To consistently have it displayed at the bottom of the screen, you can utilize the following CSS:

#social-media {
    position: fixed;
    bottom: 0;
}

You can refer to the positioning documentation on W3Schools by visiting this link.

If you prefer it to always appear at the bottom of the actual page (below other content), consider using this CSS:

#social-media {
    clear: both;
}

Answer 3

Answer №2

If you want the div to be positioned at the bottom with absolute positioning, you can achieve it like this:

#social-media {
    width: 175px;
    margin-left: auto;
    margin-right: auto;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
}
#social-media img {
    padding: 5px;
}
#social-media ul li {
    display: inline;
}

<body>
<div id="logo"></div>
<div class="search" style="text-align: center;">
  <form action="search.php" method="get">
  <input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40">
    <input type="submit" value="SEARCH!">
  </form>
</div>

<div id="social-media"> 
<img src="facebook.png">
<img src="twitter.png">
</div>

</body>

Answer 4

If you want the div to be positioned at the bottom with absolute positioning, you can achieve it like this:

#social-media {
    width: 175px;
    margin-left: auto;
    margin-right: auto;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
}
#social-media img {
    padding: 5px;
}
#social-media ul li {
    display: inline;
}

<body>
<div id="logo"></div>
<div class="search" style="text-align: center;">
  <form action="search.php" method="get">
  <input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40">
    <input type="submit" value="SEARCH!">
  </form>
</div>

<div id="social-media"> 
<img src="facebook.png">
<img src="twitter.png">
</div>

</body>

Ways to ensure a div remains at the bottom of a page without using a wrapper

Answer №1

Answer №2

Similar questions

Troubleshooting Div Element Width in CSS Not Functioning

When using the .after() method to add jQuery elements, keep in mind that they will not trigger any

Secure User Authentication using HTML and JavaScript Box

jqGrid is throwing an error: undefined is not recognized as a function

Create a customized menu with jQuery that disappears when hovered over

extract the content of CSS pseudo-elements using Python or Selenium

I am experiencing difficulties with my custom font not functioning properly

Ensure that the horizontal navigation items are equally spaced apart

Invalid file name detected during the download process

Gather information that is dynamic upon the selection of a "li" option using Python Selenium

An issue occurred while the request was being transported or processed, resulting in Error code 10 at Path /wardeninit

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

Placing an icon and a title on the same baseline

Having trouble aligning material-ui GridList in the center

Having trouble with sending a post request through ajax

Retrieve the data stored in the HTML input field prior to transferring it to the SQL database

Picture fails to load on Ionic app on the device

Instructions for implementing tooltips on a pie chart slice when hovering with the mouse pointer, using the canvas

What is the process for displaying a PHP array in HTML5 audio and video players?

Creating a Sudoku puzzle grid with HTML and CSS - a step-by-step guide