Ensuring uniform div lengths with HTML and CSS

There are 3 divs in the example below:

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

<ul>
<div class="parent">
<li>
  <div>
    Lorem Ipsum is simply dummy
  </div>
</li>
</div>
<li>
<div class="parent">
  <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting 
  </div>
</li>
</div>
</div>
</ul>

I want all of them to be the same width as the longest one. The width of the longest should be equal to the text inside it plus some pixels (e.g. +15px). Since the text will be constantly changing, the width should also dynamically change. The display needs to be inline-table. Is it possible to achieve this using HTML/CSS?

htmlcsswidth

Answer №1

Achieving this effect is feasible through the use of HTML and CSS. Take a look at the following code snippet.

.container {
  display: inline-block;
  width: auto;
}
.container div {
  border: 1px solid black;
  padding-right: 15px;
}
<div class="container">
  <div>
    Lorem Ipsum is simply dummy
  </div>
  <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting 
  </div>
  <div>
    Lorem Ipsum is simply dummy text of the print 
  </div>
</div>

As seen in the code below...

ul {
    display: inline-block;
}
ul li {
    list-style: none;
}
li div {
    border: 1px solid black;
    padding-right: 15px;
}

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

PHP: Incorrect URL formats with or without a variable present

I am currently working on customizing a PHP web application and could use some assistance. The Application is originally set up to operate in the ROOT path of the Webserver. I have made some modifications to make it work in different paths, but I am facing ...

phphtmlvariables

Positioning a flex item to the right by using float

I am in need of assistance with my HTML layout. <div class="container"> <div class="sidebar" style="float:right"> Ignore sidebar? </div> <div> main content </div> </div> The container is set to have a flex disp ...

htmlcssflexbox

Improvement in Select2 Change Event: Update the subsequent select2 box options based on the value change in the preceding select2 box

I need assistance with two select boxes, namely Category and Sub-category. My objective is to dynamically alter the available options in the subcategory box based upon the value selected in the category box. Additionally, I would like to load data for the ...

javascriptphpjqueryhtml

The clash between Angular's ng-if directive and Bootstrap's popover feature causing unexpected

<div class="form-group" ng-if="firstname"> <label>First Name</label> <input readonly type="text" class="form-control" id="first_name" ng-model="firstname" placeholder="First Name"> <a href="" data-toggle="popover" dat ...

htmlangularjstwitter-bootstrap-3popover

Excessive width of Bootstrap container

Encountering a rather simple issue: the bootstrap container inside my navbar is too wide, causing an unwanted horizontal scrollbar as it expands the body. You can view the problematic page here. The theme used for this site can be found here. What's ...

htmlcsstwitter-bootstrap

Html content overlapping div rather than being stacked vertically

My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...

javascripthtmlcss

Mapping corners with Google Maps

The mask assigned to webkit-mask-image will remain stationary even when scrolling the page. View jsFiddle Sample body{ height:1500px; } #wrapper { margin-top:250px; width: 300px; height: 300px; border-radius: 100px; overflow: hi ...

cssgoogle-maps-api-3

Methods for concealing the "image not found" icon in Internet Explorer and Chrome through CSS

I have images displayed on a webpage. Currently, when an image is not available, both Chrome and IE display a broken image indicator. I want to hide this indicator and only show the alternative text. Is there a CSS solution to achieve this? ...

htmlcssinternet-explorergoogle-chrome

Updated: "Adjust the preserveAspectRatio attribute in the SVG element within the Lottie player"

I have successfully incorporated a lottie json file using the lottie player. Unfortunately, I do not have access to the SVG file itself, only the json file. My goal is to modify the preserveaspectratio attribute of the SVG to xMinYMax meet instead of xMi ...

javascripthtmllottie

When the canvasJS range column chart is below the horizontal axis, modify the color and width of the bars

For each day of the week, there are records of fuel consumed and refilled. I envisioned representing this data in a range column chart using CanvasJS library. The unique aspect is that the color and width of the bars should change dynamically based on thei ...

javascripthtmlchartsbar-chartcanvasjs

adjust back side height of flip box does not function on IE web browser

I'm currently working on flipping a div/box, and while it's functioning correctly, I'm facing an issue with the height of the back side exceeding that of the front side. This causes the flipped div to always push down to the next element (e. ...

javascriptjqueryhtmlcssinternet-explorer

Console command to change paragraph tag color---Modifying the color

I am attempting to change the color of all paragraph tags on a webpage to white by utilizing the console. My initial attempt was: document.p.style.color = 'white'; However, this method did not have the desired effect. Interestingly, I have had s ...

javascripthtmlcss

What is the best way to align two navbar elements to the right in Bootstrap 5?

I've been attempting to position two elements at the end of the Bootstrap 5 navbar, but I haven't been successful. I've experimented with using ms-auto within a div that wraps around the login and sign up elements, but that hasn't work ...

htmlnavbarbootstrap-5

Tips for adjusting the default selection in a second dropdown menu

I have a dilemma with my two dropdown lists, "optionone" and "optiontwo". I am trying to alter the default selected value from "option value=3>3" to option value=3 selected>3 when the user selects 2 from the first dropdown list ("optionone"). <sc ...

javascriptjqueryhtmlajaxforms

Guide on jQuery: Concealing the scrollbar on the body

Is there a way to hide the scroll bar using Jquery? I tried this code for Chrome but need a solution that works for all browsers. $ ::-webkit-scrollbar { display: none; } Any suggestions on how to achieve this cross-browser compatibility? ...

jqueryhtmlcssscrollscrollbar

Showing a solo item from an array in HTML using Angular

How can I display the account name instead of the accountId property value from my list of transaction items? I have a list of transactionitems with an accountId property, and all accounts are loaded in the accounts$ array. However, I am having trouble us ...

htmlangular

Notify when the button value changes to "submit"

I recently added a jQuery form wizard to my website. I want users to receive an alert in JavaScript when they reach the end of the form. To achieve this, I inserted a simple JavaScript code at the beginning of my page within <head>..some code</hea ...

javascriptjqueryhtml

Having a large number of columns makes it difficult to adjust the column width

Is there a way to maintain column width when there are multiple columns present? When the user clicks the + to view additional data, the Product Type column ends up looking uneven due to width issues. I attempted to use style="width:300px;", but unfortuna ...

htmlcssbootstrap-4

Enhancing the responsiveness of images compared to regular images by resizing and locking them in place

I'm struggling with adjusting the responsiveness of my icons around the main wheel to changes in page size. Currently, they are not staying put relative to the middle wheel when the page size increases or decreases. I also need the wheel and icons to ...

htmlcssresponsive-designbootstrap-4

What is the best way to align an html table to the top of the page?

Can anyone help me with positioning an HTML table at the top of the screen in IE7 without the automatic top border? I am using HTML and CSS for this. I'm currently working on development in VS2008. ...

asp.nethtmlcss