Achieving consistent positioning for child elements at the top

I have the following code. I can't figure out why the top position of div1 in the second block is different from the first one. When div1 in child1 contains text or other elements, the top position of div1 and div2, div3 is equal. Can someone explain the reason behind this? Thank you!

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>

<div id='parent' style='width: 100%;height:100%;background-color:blue;position:absolute;'>

<div id='child1' style='margin:auto auto;background-color:red;margin:10px;padding:10px;'>
  <div id='div1' style='width:50px;height:30px;background-color:grey;display:inline-block;'></div>
    <div id='div2' style='width:200px;height:30px;background-color:green;display:inline-block;'>
      <input type='text' value='Text' />
    </div>
  <div id='div3' style='width:50px;height:30px;background-color:green;display:inline-block;'>Text</div>
</div>

<div id='child2' style='margin:auto auto;background-color:red;margin:10px;padding:10px;'>
  <div id='div1' style='width:50px;height:30px;background-color:grey;display:inline-block;'>Text</div>
    <div id='div2' style='width:200px;height:30px;background-color:green;display:inline-block;'>
      <input type='text' value='Text' />
    </div>
  <div id='div3' style='width:50px;height:30px;background-color:green;display:inline-block;'>Text</div>
</div>

</div>

</body>
</html>

https://i.sstatic.net/ixvDn.png

htmlcssposition

Answer №1

When a DIV element does not have any content or text, the browser treats it as an image. This causes them to be aligned to the baseline. However, if the DIVs contain content, the content itself is aligned to the baseline and the container adjusts automatically.

To resolve this issue, you can create a class called child for your container and apply vertical-align:bottom; to its first div.

.child>div:first-of-type {
   vertical-align: bottom;
}

Take a look at the example below: 

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    
    .child>div:first-of-type {
      vertical-align: bottom;
    }
  </style>
</head>

<body>

  <div id='parent' style='width: 100%;height:100%;background-color:blue;position:absolute;'>

    <div id='child1' class="child" style='margin:auto auto;background-color:red;margin:10px;padding:10px;'>
      <div style='width:50px;height:30px;background-color:grey;display:inline-block;'></div>
      <div style='width:200px;height:30px;background-color:green;display:inline-block;'>
        <input type='text' value='Text' />
      </div>
      <div style='width:50px;height:30px;background-color:green;display:inline-block;'>Text</div>
    </div>

    <div id='child2' class="child" style='margin:auto auto;background-color:red;margin:10px;padding:10px;'>
      <div style='width:50px;height:30px;background-color:grey;display:inline-block;'>Text</div>
      <div style='width:200px;height:30px;background-color:green;display:inline-block;'>
        <input type='text' value='Text' />
      </div>
      <div style='width:50px;height:30px;background-color:green;display:inline-block;'>Text</div>
    </div>

  </div>

</body>

</html>

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

Database insertion unsuccessful

Having trouble with this code. Here is the HTML form: <form method="post" action="invio_db1.php"> Name <input type="text" name="name"> <br><br; Surname <input name="surname" type="text"> <br><br> <inp ...

phphtmlsqlinsertisset

Tips for determining the actions of a node prior to its inception

Is there a way to automatically run scripts on specific elements after their creation? For example, using a jQuery plugin like autoresize to expand the height of a textarea. If I use $('.textarea').autosize(), only the current textareas will be a ...

javascriptjqueryhtmldom

Using Vuejs to dynamically render raw HTML links as <router-link> elements

Hey there, I'm just getting started with VueJS and I've been doing some interesting experiments. I created a backend service using Python/Flask that provides me with a string of HTML code containing many tags. My goal is to render this HTML insid ...

javascripthtmlvue.jsfrontend

What is the best way to make the first <p> tags bold within an array?

I tried using ::first-line, but it bolds all the p tags in the array. What I want is to only bold the first p tag which contains "Hello". <div v-for="item in first" :key="item.id"> <p class="cat_name" >{{ ...

cssvue.js

utilizing two input elements within a single form each serving a unique purpose

Hello everyone, I'm seeking assistance on how to code a form with two input element tags, each having different functions. Alas, the solutions provided in this source are not working for me. Here is the troublesome source PHP CODE: <?php $ser ...

html

Extract information from the table using $_POST

I possess a datatable within a form. Inside that table, there is a column designated for setting a price. Upon submitting the form on the same page, the $_POST data fails to populate. Consequently, I am in need of inserting it into the MySQL db post-submit ...

phphtmlmysqldatatable

Having difficulty disassociating the radio button from the label

<div class="questions" style="font-size:13pt;margin-left:20px;margin-bottom:10px;"> <p class="question" id="ques{{i+1}}" style="font-size:17pt;font-weight:normal">{{i+1+". "+a.question}}</p> <img *ngIf="isImage[i]" [src]="a.image" ...

htmlcssangular

Nodemailer is failing to send emails on Heroku

Recently, I encountered an issue that has been puzzling me. I use cloud9 for work and nodemailer works perfectly fine, sending all emails from a form I created. However, when I deployed a small server to Heroku with just a change in an environmental vari ...

javascripthtmlnpm

Attempting to locate the element's position using Selenium in Python

quem_esta_sacando = driver.find_elements_by_xpath("//div[@class='gameinfo-container tennis-container']/div[@class='team-names']/div[@class='team-name']") this is how I located the correct class, but now I want to ...

pythonhtmlcssseleniumwebdriver

The NG8002 error has occurred, as it is not possible to connect to 'matDatepicker' because it is not a recognized attribute of 'input'

I've come across an issue while working on my Angular 15 application with Angular Material. I'm trying to incorporate a date picker, but after adding the code snippet below, I encountered an error. <mat-form-field appearance="outline" ...

htmlangularangular-materialdatepickerangular15

When verifying the source, the empty() function does not eliminate any HTML content

I am facing an issue with an AJAX call that retrieves data from a PHP file. I am attempting to remove existing HTML content and replace it with the data fetched from the PHP file. To clear the content, I am using the following: $('#due-tasks-content& ...

jqueryhtmlajax

Refinement of website footer alignment

As a web designer, I am experiencing difficulty in adjusting the footer on my website. I would like the footer to be fixed at a specific height and remain in the same position unless the content increases, in which case it should move down accordingly. Can ...

htmlcss

changing the gradient color stops of an SVG on hover

Here's a CodePen I've been working on: https://codepen.io/naregjan/pen/MBzQWp Within this CodePen, I have an SVG container with four rectangles, two of which have gradients applied. My goal is to create a hover effect that transitions the gradie ...

htmlcsssvg

Display information on a web page based on user input using HTML

I've hidden other p tags and divs using display:none, How can I make them visible after inputting my name? I'd like to type in my name and reveal all the content within the previously hidden div <form method="post"> <p> < ...

javascriptjqueryhtmlcss

Guide for changing the background color exclusively in the final row of a dynamically-generated HTML table with PHP

<table width="100%"> <tr> <? $count=0; $i=1; foreach($gallery as $key => $list1) { $count++; ?> <td> <img src='<?echo base ...

phphtmlcss

Mapping memory for FirefoxOS is like equivalent strides

Is there a way to create a memory mapped file in FirefoxOS, Tizen or other pure-JS mobile solutions? In the scenario of a mobile browser where you have large amounts of data that can't fit in RAM or you prefer not to load it all at once to conserve R ...

javascripthtmlfirefox-ostizengaia

Clipped Words & Silhouettes

I'm having trouble ensuring the text in this particular example displays correctly. I am experiencing challenges with the clipping of text and shadows on certain letters, and I'm struggling to identify the root cause as well as the solution. In ...

javascriptjqueryhtmlcsstypography

Superceding Meta Character Encoding Statements

Have you ever wondered what happens when two older-style character encoding declarations are used in a webpage? Will the first declaration override the second, or vice versa? Or will they both be ignored and excluded from the encoding algorithm? For Ex ...

htmlencodingcharacter-encodingmeta-tagsmeta

Is there a way to create a table with "cells that can be controlled individually" similar to the image provided using HTML and CSS?

I have been searching online for solutions on how to create a table similar to the one in this image, but so far I haven't had much luck. I attempted to use colspan, however, it didn't yield the results I was hoping for. Does anyone have any alt ...

htmlcss

php executing javascript - error

I have a question regarding my PHP file code: echo '<script type="text/javascript">'; echo '<audio id="player" src="../cdh/ba1.mp3"></audio>'; echo '<a onclick="document.getElementById( ...

javascriptphphtmlcss