Place the center and bottom divs within the parent div

Question

Place the center and bottom divs within the parent div

Trying to center and fix a div at the bottom of another div has proven challenging for me. I've attempted using the following code snippet, but without success. Can anyone guide me on how to achieve this?

#clockPosition {
    margin: auto auto 0 auto;
    width: 30%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.parent-column {
    margin: 1%;
}

<div class="parent-column">
     <>
    <div id="clockPositon">Content here</div>
</div>

Displayed below is an image depicting the desired final outcome:

Appreciate any assistance in advance :)

html css

Answer 1

Answer №1

Check out this code snippet that includes the bootstrap feature.

<div class="parent-column col-md-5">
    <div id="clockPosition">Content here</div>
</div>

#clockPosition {
    width: 30%;
    position:absolute;
    text-align:center;
    bottom: 5px;
    border: 1px solid red;
    left: 50%;
    transform: translate(-50%, 0);
}
.parent-column {
    margin: 1%;
    height: 300px;
    width: 80%;
    position:relative;
    border: 1px solid red;
}

Answer 2

Check out this code snippet that includes the bootstrap feature.

<div class="parent-column col-md-5">
    <div id="clockPosition">Content here</div>
</div>

#clockPosition {
    width: 30%;
    position:absolute;
    text-align:center;
    bottom: 5px;
    border: 1px solid red;
    left: 50%;
    transform: translate(-50%, 0);
}
.parent-column {
    margin: 1%;
    height: 300px;
    width: 80%;
    position:relative;
    border: 1px solid red;
}

Answer 3

Answer №2

The reason your current version is not working correctly is because positioning elements like top, bottom, etc., requires the parent div to be set to a position of relative. Without defining this, the positioning won't work as expected. By setting the child element to absolute (and specifying the bottom) and the parent element to relative (making the absolute positioning relative to the parent), you will achieve the desired result.

If you want to position an element relative to a parent div:

<div class="outside">
   <div class="inside">Center and bottom">
</div>

Here's how you can achieve it with CSS:

.outside {
    width: 500px;
    height: 500px;
    position: relative;
}
.inside {
    position: absolute;
    bottom: 1px;
    left: 50%;
    margin-left: -40%;
    height: 20px;
    width: 80%;
}

If you simply want to fix a div to the bottom of the page, regardless of parent elements:

.foot-nav{
  position: fixed;
  bottom: 0;
  width: 100%;
}

For a sticky footer that remains at the bottom of the page unless the content exceeds one screen length, check out this resource for a preferred method:

Answer 4

The reason your current version is not working correctly is because positioning elements like top, bottom, etc., requires the parent div to be set to a position of relative. Without defining this, the positioning won't work as expected. By setting the child element to absolute (and specifying the bottom) and the parent element to relative (making the absolute positioning relative to the parent), you will achieve the desired result.

If you want to position an element relative to a parent div:

<div class="outside">
   <div class="inside">Center and bottom">
</div>

Here's how you can achieve it with CSS:

.outside {
    width: 500px;
    height: 500px;
    position: relative;
}
.inside {
    position: absolute;
    bottom: 1px;
    left: 50%;
    margin-left: -40%;
    height: 20px;
    width: 80%;
}

If you simply want to fix a div to the bottom of the page, regardless of parent elements:

.foot-nav{
  position: fixed;
  bottom: 0;
  width: 100%;
}

For a sticky footer that remains at the bottom of the page unless the content exceeds one screen length, check out this resource for a preferred method:

Place the center and bottom divs within the parent div

Answer №1

Answer №2

Similar questions

The CSS property object-fit: cover is unable to properly display JPEG images with EXIF orientation greater than 1

Using JQUERY to fadeIn elements when clicking on a button and loading content from an external HTML

Html elements remain stationary and do not shift positions

bespoke HTML elements and properties

The element will display above all other elements in its parent container

What is the best way to customize bullets for individual items (li) in an HTML list (ol/ul)?

Tips for automatically resizing a canvas to fit the content within a scrollable container?

Prevent users from clicking by using a CSS class in HTML and JavaScript

Trying to showcase information received from a server using an API

What is the most effective way to utilize a loop in order to generate a comma-separated list of values that does not contain an additional comma

Image swaps with timer for button

Access Information within live tabs

The hovering event trail feature is not functioning in tsParticles, unlike in particlejs

jQuery method for implementing alternating row colors that are not sequential

Need at least one form input field out of three to be completed

The list-image is nowhere to be found

Dropdown selection returning the text value instead of the designated value

adjusting iframe dimensions for iPads

Utilizing distinct useState for mapped elements

Challenges with implementing emotion in Material UI 5