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

Extract the raw text content from nested elements

Editing the dimensions of the input in Bootstrap 4

What is the maximum file size that the data link is able to store?

Tips for mastering web design techniques

How to Add a Responsive Inset Transparent Overlay to Images without Using JavaScript?

Using ion-icon inside a clickable ion-card while applying float: right does not render properly

Combining Three HTML Tags Into a Single Page

Unable to retrieve element using getElementById with dynamically assigned id

How can I create a unique CSS or JS transition for a button that dynamically changes size based on text

Is Ursina the right choice for web development?

Issues with rendering HTML5 drag and drop styles are not visible on a Windows Server 2003 platform

I am experiencing difficulty with aligning my input boxes to the center in my React-Native

Mentioning VARs found on additional pages

The total height of an HTML element, which takes into account the margin of the element itself

Anchor link leading to an incorrect location

Using Angular Material to dynamically hide columns in a table that is being created on the fly

Obtain the title of the text generated by clicking the button using a script function

rectifying file extension hyperlinks

What is the best way to adjust the fontSize of text within a table using Material UI?

Regex: Identifying all URLs except for those with ".js" or ".css" included