Locking the top of a Div in place at the bottom of its Parent div

I encountered an interesting issue when trying to position a div element.

To position the child div B inside the parent div A, I have been using relative and absolute positioning. While I know how to align their bottom edges using bottom: 0px, I need to figure out how to align the top of B with the bottom of A, as illustrated in the diagram below.

Is there a CSS solution for achieving this alignment, considering that I cannot predict the height of B? Below is my current CSS code:

The Goal -

HTML - 

<div id="a">
     <div id="b"> </div>
</div>

CSS - 

#a{
   position: relative;
}

#b{
   position: absolute;
   bottom: 0px;
}
htmlcsspositioncss-position

Answer №1

It seems like what you're looking for is setting top: 100%. Check out this example here: http://jsfiddle.net/ysafx/

#a {
    position: relative;
    outline: 1px solid red
}

#b {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 5px;
    outline: 1px solid blue
}

Answer №2

If you are unsure about the height,

Make sure to include the following code:

CSS:

#a {
   position: relative;
   background: black;
   color: #fff;      
}

#b {
   position: relative;
   background: blue;
   color: #fff; 
}

HTML:

<div id="a">
    // Place your content here for div a
</div>
<div id="b">
    // Insert your content here for div b
</div>

Check out the Demo: http://jsfiddle.net/rathoreahsan/cKsVK/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am interested in displaying a tooltip when a button is hovered over

In my application, there is a button with the ID #download_setup. Currently, an AJAX call is triggered upon clicking this button. However, there are certain users for whom I need to prevent this AJAX download and instead display a tooltip saying "you don&a ...

jqueryhtmlcss

Is there a way to align these side by side?

Is it a silly question? Perhaps. But I can't seem to figure out how to align my text and colorpicker on the same line instead of two. Take a look at my fiddle. I've tried removing display:block and clear:both, but that didn't do the trick. H ...

javascriptjquerycss

What is the process for clearing the input value of a View from another View?

My situation seems simple and straightforward, yet I am struggling to achieve the desired output. In this scenario, I have two HTML pages named Index.htm and Main.htm, as well as a script page named mscript.js. Index.htm contains a button (Clear), and Mai ...

javascriptjqueryhtmlasp.netangularjs

The relationship between elements and text input positioning

I am faced with a unique challenge. As a user types in an input field, I need to display a reset button positioned center right of the input. I must adhere to the current HTML structure for the label, input, button, and error message and I prefer not to r ...

htmlcss

Center both vertically and horizontally in Bootstrap UI Modal

I'm attempting to create a Bootstrap UI Modal that is centered both vertically and horizontally. While I found this solution that successfully centers the modal vertically, it loses its horizontal centering when applied to my own template with 800px ...

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap

Bootstrap Button Problem: Difficulty arranging buttons in a neat way, unable to position them next to each other

I'm currently working on a real estate website project and have designed a Photoshop template which is uploaded on Behance. Check it out here. Right now, I'm creating the static version of the real estate store template and facing an issue with ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Angular HTML is throwing an error related to object arrays

Is there a way to display only specific fields of an array? <div class="form-check" *ngFor="let periodo of filterPeriodos()"> <div>{{periodo.periodos | json}}</div> <input class="form-check-input mr- ...

javascripthtmlangular

Issue with background image repeating incorrectly when resizing

I've recently added an image as the background for my website using the following style: #whole_wrapper{ background-image: url(../images/wrapper_bg.jpg); background-repeat: repeat-x; width: 100%; float: left; height: 116px; } ...

htmlcss

Using the linear-gradient method in CSS for border images

I managed to successfully create a design using the CSS properties border-image and linear-gradient. However, I am struggling to understand the syntax involved. While I grasp the concept that the series of colors defines the gradient transition, as well as ...

htmlcss

Using Bootstrap, creating a full-height body with multiple scrollable divs

Struggling to replicate a HTML layout similar to the one shown in Figure 1 using bootstrap. Figure 1 Despite numerous attempts, I am still unable to fully achieve the layout using bootstrap's row and column classes. If anyone can offer guidance, it ...

htmlcssbootstrap-5

Iterate through an HTML table and transfer matching items along with their corresponding calculated amounts to a separate table

<html> <body> <div> <table border="1" id="topTable"> <thead> <th>Item</th> <th>Sold</th> </thead> <tbody id="topTableBody"> <tr> ...

javascriptjqueryhtml

Using jQuery to retrieve and update information within a table layout

This is the structure of my table. <table> <tr> <td> <input type="text"> 1 </input> </td> </tr> <tr> <td> <input type="text"> 1 </inpu ...

jqueryhtml

When it comes to creating a CSS drop-down menu, don't forget to incorporate an additional <ul

I've created a drop-down menu using CSS with 5 visible list items. When hovering over one of the list items, it highlights and triggers a drop-down effect to display another list underneath. Essentially, you have an initial set of options, and upon ho ...

htmlcss

Show [image not available] if image src does not display an image

When creating my image's src, I pull the data from a database field called [pictureName]. If the Picture name is null or does not return an image, I want to display the [image not found] picture. Below is the ASPX code used to generate the img: < ...

htmlasp.netimagesrc

Retrieve the ID of the image element using Jquery from a collection of images within a div container

I'm encountering a simple issue that I can't seem to solve. I am working on a basic slider/gallery with the following functionalities: 1) "If button 1 is clicked, image one will appear." 2) "Clicking on button 2 will make IMAGE 1 slide left and I ...

javascriptjqueryhtmlcssimage

Manipulating links using JQuery: avoiding the binding of new links

I need to update a website with 50 pages that currently doesn't use ajax, making it cumbersome to make edits since changes have to be made on all 50 pages individually. After removing duplicate HTML from all 50 pages, I'm facing some issues: fu ...

javascriptjqueryhtml

Is there a way to keep a section of an animated class in place?

My website features an animated retractable menu bar with two separate menus. Clicking on one icon activates a sliding motion to reveal that particular menu while causing the second menu to retract in a similar fashion. To achieve a smooth transition effec ...

javascripthtmlcss

New jQuery div elements do not have animations when using $(document).on

After creating an animation function that worked well with hovering over squares and leaving a trail, I later needed to add or remove squares based on the page size. Seeking help from here, I discovered my bind animation function wouldn't work on new ...

javascripthtmljquerycss

What is the Best Way to Utilize CSS ID Selectors with Next JS?

After discovering that npx create-react-app is no longer supported, I decided to delve into Next JS as a new framework. My goal now is to transition one of my websites from pure HTML, SASS (CSS), and JavaScript to utilizing Next JS and SASS. The current c ...

cssreactjsnext.jssass

.toggleClass malfunctioning inexplicably

I've been struggling to make a div box expand when clicked and revert to its original size when clicked again. It seems like a simple task, but no matter what I try, I can't seem to get it right. I'm not sure where I'm going wrong, as t ...

javascriptjqueryhtmlcsshover