Position the div at the bottom of the page

Question

Position the div at the bottom of the page

I managed to successfully position the div at the bottom using this code snippet:

#div {
    position: absolute;
    width: 100%;
    height: 58px;
    margin: 0 auto;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

Lately, I decided to add a sidebar to my website which is 300px wide. Upon opening the sidebar, the entire site shifts to the left by 300px, except for the div positioned at the bottom.

After some experimentation, I discovered that if I remove the position: absolute; property from the CSS, the div will move along with the rest of the elements on the site, but it will no longer be anchored at the bottom.

Is there a way to have the div move with the site when the sidebar opens while still remaining at the bottom of the page?

Any help or suggestions would be greatly appreciated.

html css

Answer 1

Answer №1

div{
 position:fixed;
 bottom:0;
}

To achieve horizontal centering of divs within a parent div, consider the following example in HTML:

   <div class="parent">
            <div class="children"></div>
            <div class="children"></div>
            <div class="children"></div>
    </div>

In CSS:

 div.parent{
    border:1px solid black;
    padding:25px;
    text-align:center;
}

div.children{
    border:2px solid blue;
    background-color:orange;
    width:25%;
    display:inline-block;
    height:250px;
}

An alternative method to center only one div inside another can be achieved like this:

HTML

<div class="parent">
        <div class="children">Woho</div>
</div>

In CSS

div.parent{
    border:1px solid black;
    padding:25px;
}

div.children{
    border:2px solid blue;
    background-color:orange;
    width:250px;
    margin:0 auto;
}

Using margin:0 auto; will center your div horizontally.

Answer 2

div{
 position:fixed;
 bottom:0;
}

To achieve horizontal centering of divs within a parent div, consider the following example in HTML:

   <div class="parent">
            <div class="children"></div>
            <div class="children"></div>
            <div class="children"></div>
    </div>

In CSS:

 div.parent{
    border:1px solid black;
    padding:25px;
    text-align:center;
}

div.children{
    border:2px solid blue;
    background-color:orange;
    width:25%;
    display:inline-block;
    height:250px;
}

An alternative method to center only one div inside another can be achieved like this:

HTML

<div class="parent">
        <div class="children">Woho</div>
</div>

In CSS

div.parent{
    border:1px solid black;
    padding:25px;
}

div.children{
    border:2px solid blue;
    background-color:orange;
    width:250px;
    margin:0 auto;
}

Using margin:0 auto; will center your div horizontally.

Position the div at the bottom of the page

Answer №1

Similar questions

Unable to navigate through select2 dropdown if fixed div is present

What is causing jQuery toggleClass to fail in removing a class?

Dynamic Label Editing on ASP Page Using Master Page

Issues with CSS styling inheritance in Angular components

Error code 102 appeared, stating: "The server has declined the connection attempt"

Tips for displaying only one image when clicked and hiding other divs:

Creating a column in CSS that maximizes width without utilizing 100% or causing text wrap

Align text vertically within a link box by overriding inherited CSS styles

Customizing Eclipse Outline View for Cascading Style Sheets (CSS) Files

I've been stuck on this for the past hour, trying to figure out why /js/bootstrap.min.js can't be located

Find the mean of two values entered by the user using JavaScript

What is the best way to incorporate a function within a $.click (jquery) event that utilizes an id directly from the clicked element?

Choosing radio buttons within rows that contain two radio buttons using ngFor

Remove the float from the final list item in order to resolve display issues in Internet Explorer

Challenges experienced during the process of uploading a website to the server

Enhance the Bootstrap Sass by integrating a color scheme that seamlessly complements all elements such as backgrounds, text, and borders throughout the

Is it still necessary to include -webkit- and -moz- prefixes for widely recognized CSS3 properties?

Experiencing challenges with showcasing numerical values in the grid cells

Is there a way for the React select component to adjust its width automatically based on the label size?

Creating a responsive navigation menu using Bootstrap 4 by merging data from various MySQL tables