Guide on aligning a child div directly beneath its parent without specifying the parent's height

I want to position a div beneath its parent in a way that mimics a menu opening below it. Currently, I attempted using right and top, but the child div ends up overlapping the parent.

If the parent had a defined height (rather than top: 0 as shown below), I could have used top with that height. However, is there a way to achieve this without specifying the parent's height?

.container {
  width: 350px;
  height: 200px;
}

.parent {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  margin-top: 5px;
  padding: 2px 3px;
  width: 120px;
  display: flex;
  align-items: center;
  position: relative;
  direction: rtl;
  float:right;
  background-color: red;
}

.child {
  position: absolute;
  background-color: blue;
  width: 150px;
  height: 200px;
  margin: 3px auto;
  box-sizing: border-box;
  overflow: hidden;
  right: 0;
  top: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="parent">
    <i class="fa fa-calendar"></i>
    <div class="child">
    </div>
  </div>
</div>

htmlcss

Answer №1

Simply apply top:100% to the child element.

.container {
  width: 350px;
  height: 200px;
}

.parent {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  margin-top: 5px;
  padding: 2px 3px;
  width: 120px;
  display: flex;
  align-items: center;
  position: relative;
  direction: rtl;
  float:right;
  background-color: red;
}

.child {
  position: absolute;
  background-color: blue;
  width: 150px;
  height: 200px;
  margin: 3px auto;
  box-sizing: border-box;
  overflow: hidden;
  right: 0;
  top: 100%; /* This is how it's done */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="parent">
    <i class="fa fa-calendar"></i>
    <div class="child">
    </div>
  </div>
</div>

Answer №2

.container {
  width: 350px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.parent {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  margin-top: 5px;
  padding: 2px 3px;
  width: 120px;
  align-items: center;
  direction: rtl;
  float:right;
  background-color: red;
}

.child {
  background-color: blue;
  width: 150px;
  height: 200px;
  box-sizing: border-box;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="parent">
    <i class="fa fa-calendar"></i>
  </div>
  <div class="child">
  </div>
</div>

You can organize your HTML structure in a similar manner and apply the display: flex property to the .container.

Was this response helpful for you?

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

Unfortunately, Safari and iOS do not support the video functionality

I am encountering an issue with my HTML5 sample video not loading in Safari 11 on OSX, but working perfectly fine in Chrome and Firefox. Additionally, the video is not functioning on iOS at all (neither in Safari nor in Chrome). Below is the HTML code: & ...

djangohtmlvideosafarihttp-headers

What is the method for loading a subcategory based on the category by invoking a jQuery function within the <td> element of a JavaScript function that adds rows dynamically?

Whenever I click the add row button, the category dropdown list successfully loads. However, when I select an option from this category list, the subcategory does not load any list. The Javascript function responsible for adding rows dynamically is as fol ...

javascriptphpjqueryhtmlmysql

I'm struggling to solve a straightforward jQuery sliding issue

I am struggling to make text slide from right to left on my website. I want the text to appear only when the page loads or refreshes, and then slide off when a link is clicked, revealing new text. Can anyone help me figure this out? http://jsfiddle.net/XA ...

javascriptjqueryhtmlcss

Container that can be scrolled under varying heights

Trying to structure some CSS in order to create a website that resembles the layout of a typical desktop application: Almost there, but struggling to make the scrollable panel stick to the bottom of the viewport and show a scrollbar instead of overflowing ...

htmlcss

Populate the table with JSON object information

I've structured a table as follows: <div class="row"> <div class="row"> <table class="table table-bordered table-striped tree-grid"> <thead class="text-primary"> <tr> <th> ...

htmlangularjsjson

Can CSS be used to target HTML elements that come after another regardless of their position in the document?

Is there a way to style any <h1> element(s) that come after an <h2> element using only CSS? I've searched through countless pages of CSS documentation, trying to figure out if it's possible to target specific elements that appear AFT ...

htmlcsscss-selectorsxhtmlpseudo-class

How to automatically set a default bootstrap tab upon page load using an MVC JsonResult responseData

I'm looking to enhance the user experience on my dashboard by allowing users to set their preferred default tab view upon logging in. Using an AJAX call to retrieve the value from the database in MVC, I am working on the JS/Razor side of things to mak ...

jquerycsstwitter-bootstrap

Material-UI's simplification of 10px comprehension

I'm a bit confused about why we have to do this for the 10px simplification: html { font-size: 62.5%; /* 62.5% of 16px = 10px */ } Shouldn't the following code handle everything? const theme = createMuiTheme({ typography: { // Set the ...

cssreactjsthemesmaterial-uifont-size

Comparison between Static HTML controls and Razor HTML helpers.Static HTML controls are

Just starting to learn ASP.NET MVC and I've noticed that it generates controls like @Html.TextBoxFor(x => x.Name) which resemble server-side controls in web forms. Since browsers only understand HTML, these controls need to be converted to HTML bef ...

c#asp.netasp.net-mvchtmlrazor

Through the implementation of JavaScript, the element's class is dynamically altered

While working on my project, I encountered an issue with implementing a change in the class of an element using JavaScript. The problem is that when I click on the home page, the last page does not get deselected. Here is my current JavaScript code: const ...

javascripthtml

Three divs arranged side by side with responsive design for mobile viewing

This code generates 3 divs for display. However, I am looking to optimize them for mobile devices. What steps can I take to accomplish this? Currently, the divs are oriented to the left and are not visible on a mobile device. I would like them to display ...

htmlcss

What is the best way to specify the CSS :hover state within a jQuery selector?

I am trying to change the background color of a div element when hovered using jQuery, but for some reason the following code is not working as expected: $(".myclass:hover div").css("background-color","red"); Can someone provide guidance on how to achiev ...

javascriptjqueryhtmlcss

Achieving effective targeting of the second segment within a string enclosed in a span tag through increased specificity

When it comes to styling elements, the easiest way is to use classes and assign the properties needed. However, 1. I'm not a huge fan of creating classes all over the place. That's what specificity and CSS mapping are for. 2. Going thro ...

htmlcsscss-selectorscss-specificity

Step-by-step guide to setting up Angular 2 with fullpage.js scrolloverflow

I am currently working on a project using Angular 2 that incorporates the fullpage.js port from https://github.com/meiblorn/ngx-fullpage. I am facing an issue with implementing scrolloverflow on a specific section and could use some guidance. I have alread ...

htmlangularfullpage.js

What is the best way to create a CSS grid with horizontal overflow?

I'm currently working on a 4-column layout using CSS grid. As the browser width reaches a specific breakpoint, I want the first column to be fixed on the left side of the browser (X-axis) while the other columns scroll under it. Right now, I am utiliz ...

htmlcsscss-grid

What is the way to display the final list item when clicking in jQuery?

I am attempting to achieve a specific behavior where clicking on a button will trigger the content below to scroll in such a way that only the last item in the list is visible. I have been using jQuery for this functionality, but unfortunately, it is not ...

javascriptjqueryhtmlcss

How can one element be made to rely on the presence of another element?

I'm currently working on my portfolio website and encountering an issue. Whenever I hover over an image of a project, the image expands in size, becomes less transparent, and a description of the project pops up. However, I would like to include a lin ...

javascripthtmlcss

PHP function array_sum returns the sum of all values in an array rather than displaying each number

I have a collection of unique "coupons" with corresponding "productid"s https://i.stack.imgur.com/IgtFN.png My goal is to transform this list into an array using: $claimed = array($rowOrder['productid']); The problem arises when I attempt to ...

phphtmlmysqlpdo

tips for linking my webpage with the database

While working on a registration page, I encountered an issue where the entered information was not being stored in the database. Instead, an error message appeared: Notice: Undefined variable: sql in C:\xampp\htdocs\Bawazir\Untitled-1. ...

phphtmlcssmysql

Why did the creators choose to integrate a dropdown menu into Twitter Bootstrap?

While exploring Twitter's Bootstrap framework, I couldn't help but be impressed. However, one feature that has left me a bit puzzled is the dropdown navigation menu. First of all, to view child links, you need to click on the parent. I understan ...

jqueryhtmltwitter-bootstrapsemantic-markup