Is there a way to ensure that the size of the second div box can adjust dynamically in CSS?

Is there a way to make multiple boxes expand dynamically in size when one of them contains more words? Currently, the problem is that only the box with more text expands while the others remain unchanged. I want all the boxes to follow the same size dynamically, regardless of word count.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  display: table;
  height: 100px;
  width: 100%;
  background-color: orange;
  text-align: center;
  border: 2px solid #f69c55;
  margin-bottom: 10px;
}
span {
  display: table-cell;
  vertical-align: middle;
}
</style>
</head>
<body>

<div id="div"><span>IN THE MIDDLE OF NOWHERE</span></div>

<div id="div"><span>LIVING HELL OF CSS</span></div>

<div id="div"><span>LIVING HELL OF CSS no matter how many words inside the box itt will not dynamically expand but keep the size of the box at the same size as the rest so this is my stupid test to make sure every keeps within the boundary of the rectangle boxes all the time without exception. In any case it goes out of the box the word will be truncated for whatever stupid reason. Is this a possible scenario that the css can do or not?. So this is the longest words expansion for a test to prove the theory in the head. Or will the word start to squeeze in and fit within the box all the time or will it expand the box to become larger than it should whatever it is man man man. Oh yes now i can see the expansion of the box when the words exceed the length the box can keep within the rectangle size dimension</span></div>


</body>
</html>

https://i.sstatic.net/rGs4o.jpg

Answer №1

If you're looking to achieve this in CSS, your best bet is to utilize the power of the CSS Grid Layout, specifically by making use of the grid-auto-rows property.

(For browser support information, check out css-grid support)

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-row-gap: 10px;
}

.grid-container>div {
  background-color: orange;
  border: 2px solid #f69c55;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
<div class="grid-container">
  <div><span>IN THE MIDDLE OF NOWHERE</span></div>

  <div><span>LIVING HELL OF CSS</span></div>

  <div><span>LIVING HELL OF CSS no matter how many words inside the box itt will not dynamically expand but keep the size of the box at the same size as the rest so this is my stupid test to make sure every keeps within the boundary of the rectangle boxes all the time without exception. In any case it goes out of the box the word will be truncated for whatever stupid reason. Is this a possible scenario that the css can do or not?. So this is the longest words expansion for a test to prove the theory in the head. Or will the word start to squeeze in and fit within the box all the time or will it expand the box to become larger than it should whatever it is man man man. Oh yes now i can see the expansion of the box when the words exceed the length the box can keep within the rectangle size dimension</span></div>
</div>


Updated the CSS slightly to address a bug in Firefox (now using Flexbox for centering)

Answer №2

Execute the following command:

$('#some-element').cloneCSS('#another-element')
during an onChange event to utilize the copyCss functionality, make sure to include the jquery.copyCss.js CDN.

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

Displaying a dynamic progress bar across all elements in fullscreen mode

I am looking to implement a full-screen indeterminate progress bar that overlays all screen elements. Here is my specific use case: When a user fills out a form, including an email field, the email id is checked against a database via ajax. While waiting ...

HTML does not occupy the entire width of the page

I'm struggling with an issue on my website where the <html> element doesn't span full width on mobile devices. Currently, I am using Bootstrap and Jquery for my website. If you have any insights on what may be causing this problem, please ...

Bootstrap3 and jQuery are attempting to achieve vertical alignment

I am trying to vertically align Bootstrap col-md* columns. I have two blocks, one with text and one with an image, and I want them to be equal in height with the text block vertically centered. My current solution is not working correctly. Can someone plea ...

CSS table row border displaying irregularly in Chrome and Internet Explorer

I recently created a basic table with bottom row borders. Surprisingly, the borders display perfectly in Firefox but only partially in Chrome and IE 10: <div style="display:table; border-collapse: collapse; width: 100%"> <div style="display:table ...

What is the reason behind shadow dom concealing HTML elements when viewed in inspect mode?

https://i.stack.imgur.com/UZM7f.png Monday.com has implemented Shadow Dom to protect its source code. How can I work around this limitation? ...

Creating lasting placeholder text with gaps between each word

Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...

What is the solution for aligning <grid> containers to match the height of the tallest container in the row?

I've been grappling with a CSS issue. I'm attempting to ensure that my accordion containers within my layout all have the same height as the tallest item on their respective rows. This would create a sleek and responsive layout where all items ar ...

Displaying image titles when the source image cannot be located with the help of JavaScript or jQuery

I am currently facing an issue where I need to display the image title when the image is broken or cannot be found in the specified path. At the moment, I only have the options to either hide the image completely or replace it with a default image. $(&apo ...

What is the best way to focus on a specific section of a CSS class name?

Successfully Working Example: HTML: <div class="items"> <div class="item">item 1</div> <div class="prefix-item-suffix">item 2</div> <div class="item">item 3</div> < ...

Will inserting a * in a CSS file affect the styling in Internet Explorer?

I've been tasked with updating an older project to incorporate the latest technologies. Within the project's style sheets, some styles are prefixed with: #calendarDiv{ position:absolute; width:220px; *width:215px; *max-width:210px; border:1px s ...

Dynamic banner featuring animated text, automatically resizing divs based on width while maintaining body width

Currently, I am working on creating a banner with moving text. While I have managed to come up with a solution for implementing this effect, there are two significant issues that I am facing. The width values in pixels need to be manually adjusted based ...

Restrict printing loops within the designated division layer

Is there a way to limit the number of rows displayed horizontally when using foreach? I only want to display 7 rows. Can this be achieved with CSS or pagination? Here is an image illustrating the issue: https://i.sstatic.net/yJx3N.png Currently, it print ...

Is there a way to prevent text flipping using CSS or jQuery?

Is there a way to prevent the contents of an object from flipping when it is rotated +180°? I want to keep everything inside readable and avoid any flipping effects. ...

Replace existing styled-component CSS properties with custom ones

One of my components includes a CheckBox and Label element. I want to adjust the spacing around the label when it's used inside the CheckBox. Can this be achieved with styled()? Debugging Info The issue seems to be that the className prop is not b ...

Implementing a persistent header on a WordPress site with Beaver Builder

My website URL is: . I have chosen to use beaver builder for building and designing my website. I am in need of a fixed header that can display over the top of the header image. Here is the code snippet that I currently have: <div id="header">html ...

Tips for creating a fixed footer that adjusts with a flexible wrapper

Feeling incredibly stressed, I embarked on a quest to find the perfect sticky footer. After searching Google for what seemed like an eternity, I came across multiple tutorials recommending the use of min-height:100%. However, this approach caused the wrap ...

I need to position the CSS vertical scrollbar on the right side of the page

I can't figure out how to move the vertical scrollbar to sit on the right side of my site's work page. Any help would be greatly appreciated. Below is the provided HTML code: <div class="heading"> <h1>PRINT</h1> &l ...

What is the best way to reposition the main body content lower on the page when switching to mobile layout?

I am facing an issue where my website switches to mobile design at 850px, but the button I have on both desktop and mobile mode gets hidden under the header banner when it transitions to mobile design. I want to adjust the main body content of the website ...

ToggleButtonGroup in Material UI is a great way to create toggle

I am trying to implement the ToggleButtonGroup feature from Material UI in my React application. I am facing an issue where I am unable to pass values into my state correctly. The code snippet provided below shows that while the Select component works fi ...

Modifying the color of the tooltip arrow in Bootstrap 4: A step-by-step guide

How can I change the arrow color of the tooltip using Bootstrap 4? Here is my current code: HTML: <div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Service fee helps Driveoo run the platform and provide dedicate ...