CSS: Trouble with elements positioning

Question

CSS: Trouble with elements positioning

I am attempting to position two boxes on top of each other at the bottom of a different div. Here is the code I have:

<div style = "height:400px;width:400px;border:1px solid #000;">
    <div style = "position:relative;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
    <div style = "position:relative;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
</div>

However, I am facing an issue where the boxes are positioned at the top of their container instead of the bottom. Can someone provide assistance?

html css

Answer 1

Answer №1

To achieve the desired layout, you need to set the container as relative and the boxes as absolute positioning:

<div style = "height:400px;width:400px;border:1px solid #000; position:relative;">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

Further refining the answer:

<div style = "height:400px;width:400px;border:1px solid #000; position: relative;">
    <div style = "position: absolute;height:100px;border:1px solid #000; bottom: 0;">
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;"></div>
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;">
    </div>
</div>

Answer 2

To achieve the desired layout, you need to set the container as relative and the boxes as absolute positioning:

<div style = "height:400px;width:400px;border:1px solid #000; position:relative;">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

Further refining the answer:

<div style = "height:400px;width:400px;border:1px solid #000; position: relative;">
    <div style = "position: absolute;height:100px;border:1px solid #000; bottom: 0;">
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;"></div>
        <div style = "height:100px;width:100px;border:1px solid #000;float:left;">
    </div>
</div>

Answer 3

Answer №2

To achieve the desired layout, position the second div at the bottom using `bottom:0;` and then place the first div at the top while keeping the other one at the bottom.

<div class="container">
    <div class="top-div">
    </div>
    <div class="bottom-div">
    </div>
</div>

<style>
.container
{
    height:400px;width:400px;border:1px solid #000;
    position:relative;
}
.top-div
{
    position:absolute;
    height:100px;
    width:100px;border:1px solid #000;
}
.bottom-div
{
    position:absolute;
    height:100px;
    width:100px;
    border:1px solid #000;
    bottom:0;
}
</style>

Answer 4

To achieve the desired layout, position the second div at the bottom using `bottom:0;` and then place the first div at the top while keeping the other one at the bottom.

<div class="container">
    <div class="top-div">
    </div>
    <div class="bottom-div">
    </div>
</div>

<style>
.container
{
    height:400px;width:400px;border:1px solid #000;
    position:relative;
}
.top-div
{
    position:absolute;
    height:100px;
    width:100px;border:1px solid #000;
}
.bottom-div
{
    position:absolute;
    height:100px;
    width:100px;
    border:1px solid #000;
    bottom:0;
}
</style>

Answer 5

Answer №3

1) Make sure your container has a position of 'relative'

2) Ensure that your boxes are set to 'absolute' positioning, not 'relative'

Answer 6

1) Make sure your container has a position of 'relative'

2) Ensure that your boxes are set to 'absolute' positioning, not 'relative'

Answer 7

Answer №4

To achieve the desired layout, the outer div should be styled with position:relative, while the two inner divs should have position:absolute.

<div style = "height:400px;width:400px;border:1px solid #000; position:relative">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

Check out this CSS-Tricks Video for more information

Answer 8

To achieve the desired layout, the outer div should be styled with position:relative, while the two inner divs should have position:absolute.

<div style = "height:400px;width:400px;border:1px solid #000; position:relative">
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>
<div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
</div>

Check out this CSS-Tricks Video for more information

Answer 9

Answer №5

To align the div at the bottom of the container, you need to apply position relative to the parent div and absolute to the child div. This prevents any overlapping between the two divs. Adjust the 'bottom' property of the last div to change its position at the bottom.

<div style = "height:400px;width:400px;border:1px solid #000;position:relative;">
    <div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
    <div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:100px;">
    </div>
</div>

Answer 10

To align the div at the bottom of the container, you need to apply position relative to the parent div and absolute to the child div. This prevents any overlapping between the two divs. Adjust the 'bottom' property of the last div to change its position at the bottom.

<div style = "height:400px;width:400px;border:1px solid #000;position:relative;">
    <div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:0px;">
    </div>
    <div style = "position:absolute;height:100px;width:100px;border:1px solid #000;bottom:100px;">
    </div>
</div>

CSS: Trouble with elements positioning

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Pager made the bold decision to transition from a horizontal layout to a vertical format

How can you turn off CSS3 animations for browsers that don't support them

retrieve the month and year data from the input date

Guide to crafting a flawless pixel-perfect separator with CSS borders

Eliminate the gap between spans when wrapping words

After refreshing the page, the ngRoute white page is displayed

The custom component at the beginning of the MDX file in a Next.js project is not adhering to the

Having trouble with prettyphoto functionality

Customizing the underlineFocusStyle of a material-ui TextField component using regular CSS styling

Enhance the appearance of the input range by styling it with an additional class both before and

The autosearch feature seems to be malfunctioning

What is the best way to conceal a sticky footer using another element?

Acquire the stripe color scheme of Bootstrap tables

How to set a default checked value in a custom DropDownList in AngularJS?

Creating a custom loading spinner featuring your logo

ui-grid row size set to automatically adjust using rowHeight : 'auto'

Interactive menu backdrop determined by div element

Determine the elapsed time in seconds between two specified moments

Simple Steps to Convert an HTML String Array into Dynamic HTML with AngularJS Using ng-repeat

Turn off browser feature that automatically adds overflow:hidden on touch screen devices