Is there a way to maintain consistent height among vertical divs?

Is it possible to create a ranking system that adjusts based on the user's points while maintaining consistent height with an image? How can I eliminate the br tags in this scenario?

<!DOCTYPE html>
<html lang="en>"
<head>
    <meta charset="UTF-8>"
    <title>Document</title>
</head>
<body>
<style>
    .parent {
        display: table;
    }

    .child {
        display: table-cell;
        vertical-align: middle;
        padding-left: 20px;
    }
</style>
<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test<br/> Test Test Test<br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test<br/> Test Test Test<br/> Test Test Test<br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test<br/> Test Test Test<br/> Test Test Test<br/> Test Test Test<br/> Test Test Test
    </div>
</div>
</body>
</html>

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

htmlcsstwitter-bootstrap

Answer №1

When utilizing the Flex feature, you can achieve the same result by referencing the code provided below

Implement CSS Styles

.row {
  display: flex; /* ensures equal height of the children */
}    

.col {
  flex: 1; /* also guarantees equal width */

  padding: 1em;
  border: solid;
}

Incorporate HTML Code

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

Answer №2

To ensure the child class has a specific width, you can set it to 90px. Keep in mind that this may cause issues on smaller screens.

<!DOCTYPE html>
<html lang="en>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <style>
    .parent {
      display: table;
    }
    
    .child {
      display: table-cell;
      vertical-align: middle;
      padding-left: 20px;
      width: 90px;
      text-align:right;
    }
  </style>
  <div class="parent">
    <div class="child">
      Test
    </div>
    <div class="child">
      Test Test Test Test Test Test
    </div>
    <div class="child">
      Test Test Test Test Test Test Test Test Test
    </div>
    <div class="child">
      Test Test Test Test Test Test Test Test Test Test Test Test
    </div>
    <div class="child">
      Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
    </div>
  </div>
</body>

</html>

Answer №3

<div class="parent">
<div class="child">
    Example
</div>
<div class="child">
    <div> Example Example Example </div>
    <div> Example Example Example </div>
</div>
<div class="child">
    <div> Example Example Example </div>
    <div> Example Example Example </div>
    <div> Example Example Example </div>
</div>
<div class="child">
    <div> Example Example Example </div>
    <div> Example Example Example </div>
    <div> Example Example Example </div>
    <div> Example Example Example </div>
</div>
<div class="child">
    <div> Example Example Example </div>
    <div> Example Example Example </div>
    <div> Example Example Example </div>
    <div> Example Example Example </div>
    <div> Example Example Example </div>
 </div>

Answer №4

<!DOCTYPE html>
<html lang="en-US>
<head>
    <meta charset="UTF-8>
    <title>My Document</title>
</head>
<body>
<style>
    .parent {
        display: flex;
        align-items:center;
    }

    .child {
        vertical-align: middle;
        padding-left: 20px;
    }
    .child p{ margin:0; }
</style>
<div class="parent">
    <div class="child">
        Example
    </div>
    <div class="child">
        <p>New Example Text</p>
        <p>New Example Text</p>
   </div>
 
    <div class="child">
        <p>New Example Paragraph</p>
        <p>New Example Paragraph</p>
        <p>New Example Paragraph</p>
    </div>
    <div class="child">
        <p>Different Test Text</p>
        <p>Different Test Text</p>
        <p>Different Test Text</p>
        <p>Different Test Text</p>
    </div>
    <div class="child">
        <p>Unique Content</p>
        <p>Unique Content</p>
        <p>Unique Content</p>
        <p>Unique Content</p>
        <p>Unique Content</p>
    </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

switching up the header's background image using CSS

As someone new to CSS, I am currently working with the Hotel Master WordPress theme. I want to customize the header background image, but unfortunately the theme does not have a built-in option for that (only a color change option). This means I will need ...

htmlcsswordpress

Improving User Experience with HTML Form Currency Field: Automatically Formatting Currency to 2 Decimal Places and Setting Maximum Length

Hello there, I am currently facing an issue with the currency auto-formatting in a deposit field on my form. The formatting adds 2 decimal places (for example, when a user types 2500, the field displays 25.00). However, the script I wrote does not seem to ...

javascriptjqueryhtml

Would it be considered improper to apply ID's to DOM elements for the purpose of automation, as it may transform their CSS classes into individual entities?

Just thinking about the best approach for Automation (such as Selenium). I've been advised against using IDs on elements, as it could result in JS errors (in case of duplicate IDs) and make CSS classes unique. While I see the point, not having IDs can ...

javascripthtmlcssautomation

Locate numbers 2, 3, 6, 7, and 10, and continue in numerical order, within the

Having trouble with this one. Does anyone know how to display the items like this: 2, 3, 6, 7, 10 and so on... Is there a jQuery or CSS hack that can achieve this? I'm stuck trying to figure it out .container { display: flex; flex-flow: row wra ...

jquerycss

Dynamically scrolling an element using jQuery without specifying specific values

I need to keep an element fixed when scrolling on a page without setting specific height values. Do you know of any way to achieve this? Below is the code for reference: // Keep the orange box at the top after scrolling to a certain extent $(window).sc ...

jquerycss

Utilizing ng-model-options updateOn:blur in conjunction with the uib-datepicker popup

There is an input field where a user can either enter a date manually or choose one from the uib-datepicker calendar (https://angular-ui.github.io/bootstrap/). When the user clicks on the input, the calendar pops up for date selection. Here is the input co ...

javascriptangularjstwitter-bootstrapdatepickerangular-ui-bootstrap

What are some ways to implement smooth scrolling when a navigation link is clicked?

I have a total of 3 links in my navigation bar and every time they are clicked, I want the page to smoothly scroll down to their designated section on the webpage. Although I have already set up the anchors, I lack experience in scripting to create the smo ...

javascripthtmlcssimagemodal-dialog

Turn off sticky sidebar feature for mobile-friendly layout

I have encountered an issue with my script that I need assistance with. I am trying to disable this script for responsive or mobile view, but despite trying various methods, it is not functioning as expected. <script type="text/javascript"> $(func ...

javascriptjquerycss

What is the best technique for vertically aligning text within two divs placed side by side?

Thank you for taking the time to read this. I have a piece of code similar to the one below. While using line-height works when there is only one line of text, it becomes problematic when the comments section contains multiple lines. I am wondering what w ...

htmlcss

A dynamic homepage that transforms upon login, created without the use of any content management systems

I am embarking on creating a website with registration and login features without relying on any CMS, using only pure HTML/CSS and other necessary tools. My main confusion lies in how I can develop a homepage that can cater to any visitor by displaying rel ...

csshtml

Adjusting the size of absolutely positioned div elements

Currently, I am immersed in a project that involves a full-size slideshow background with content positioned above it. The header and footer are required to have fixed margins at the top and bottom, respectively. The central part needs to be resizable wit ...

jquerycss

What is the method for determining the intersection of multiple rgba values?

If I have the following CSS code: .example { background-color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.5); } Even though the background-color and border-color share the same rgba value, they appear as different colors due to how the bor ...

htmlcssrgba

What is the best way to showcase this information within my columns?

I'm facing an issue with VueJS. I have a large dataset that I want to display in columns in a specific order. How can I properly insert the code for this? Thank you for any assistance. [ { "sort": 0, "title": "My title", "description": ...

htmlvue.jsvuejs2

Tips for creating space between flex elements in Bootstrap without disrupting the layout breakpoints

<div class="row"> <div class="col-sm-6" style="margin-right: 1px;">CONTENT</div> <div class="col-sm-6"> CONTENT</div> </div> When adding a margin to the first element, it causes th ...

htmlcssflexboxbootstrap-5

Differentiating the background color of the active tab in Bootstrap while keeping other active classes unaffected

I am currently working with Bootstrap and have created a list as shown below: https://i.sstatic.net/PqBip.png The active state of this list item is blue, but I would like to change it to green or another color. Here is the code snippet: <a class="l ...

cssbootstrap-4

Having difficulty comprehending the syntax of Linear Gradients

Seeking assistance on understanding how background images and linear gradients function together. Currently, I am only seeing a solid color instead of the intended image. Can someone please explain how this code is supposed to work? background-image:lin ...

cssuser-interfacebackground-imagelinear-gradients

Rotating a CSS arrow and toggling with JavaScript

On my webpage, I have two div banners with corresponding CSS arrows. Clicking the banners triggers a JavaScript function that toggles between revealing and hiding the text below them. As the text is revealed, the arrows rotate downward and rotate back up w ...

javascriptjqueryhtmlcss

Change the default action of the hyperlink to initiate an AJAX request instead

Recently, I've been experimenting with Bootstrap on my local machine to create a website, and everything has been going well. However, I've encountered a peculiar issue that I'm not sure is related to Bootstrap or something else. My site co ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Issue with internal URI directory structure affecting SEO mod_rewrite

I recently implemented a mod_rewrite rule on my website that transforms example.com/en/about/topic into example.com/en/view.php?p=pages/about/topic.php The specific rule I used is: RewriteRule ^en/([a-zA-Z0-9/]+)$ en/view.php?p=pages/$1.php In view.p ...

htmlregex.htaccessmod-rewriteseo

HTML Code for Tracking Facebook Friends' Likes on a Page

I am looking to show the number of friends who have liked a page in HTML. Can someone please guide me on this? I am aware that we can get the page likes using a simple URL, but I specifically want to know how to retrieve the count of friends who liked a ...

htmlangularjsfacebooksocial-likes