Calculate the width of the outer division based on the chosen inner division

Question

Calculate the width of the outer division based on the chosen inner division

Looking for a solution related to an HTML segment?

<div class="outer" style="min-width: 150px;">
   <div class="inner1">
      <span>Lorem ipsum dolor sit amet</span> // Possibly long, truncate if needed
   <div class="inner2"/>
</div>

The outer div has a minimal width that can expand. The objective is for the outer div's width to grow with inner2, but not with inner1. In essence, the outer div's width should be dictated by inner2, regardless of inner1. For instance:

If inner2's width is less than 150px, inner1 will have a width of 150px.

If inner2's width exceeds 150px, inner1's width will match inner2's div.

css

Answer 1

Answer №1

To achieve your objective, JavaScript is required.

$(document).ready(function () {
    var $outer = $('.outer');
    var $inner1 = $('.inner1');
    var $inner2 = $('.inner2');
    
       
    if ($inner2.width() > 150) {
       $inner1.css('width', $inner2.width()+'px');
       $outer.css('width', $inner2.width()+'px');
    }
  else
    {
      $outer.css('width', '150px');
    }
});

.outer  {
  background-color: yellow;
}
.inner1 {
  display: inline-block;
  background-color: red;
}
.inner2 {
  display: inline-block;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" style="min-width: 150px;">
   <div class="inner1">
      <span>Lorem ipsum dolor sit amet</span> // Can be very long, truncate as needed
  </div>
   <br />
  <div class="inner2">
  sadasda
</div>
</div>

I trust this guidance will assist you in reaching your goal :)

Answer 2

To achieve your objective, JavaScript is required.

$(document).ready(function () {
    var $outer = $('.outer');
    var $inner1 = $('.inner1');
    var $inner2 = $('.inner2');
    
       
    if ($inner2.width() > 150) {
       $inner1.css('width', $inner2.width()+'px');
       $outer.css('width', $inner2.width()+'px');
    }
  else
    {
      $outer.css('width', '150px');
    }
});

.outer  {
  background-color: yellow;
}
.inner1 {
  display: inline-block;
  background-color: red;
}
.inner2 {
  display: inline-block;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" style="min-width: 150px;">
   <div class="inner1">
      <span>Lorem ipsum dolor sit amet</span> // Can be very long, truncate as needed
  </div>
   <br />
  <div class="inner2">
  sadasda
</div>
</div>

I trust this guidance will assist you in reaching your goal :)

Calculate the width of the outer division based on the chosen inner division

Answer №1

Similar questions

Experiencing a problem with adjusting the layout on a backdrop picture

Adjust the white background to match the gray background seamlessly

Conceal the message using star symbols

Intersecting table columns with a different data table

Pandas now supports exporting data frames to HTML with the added feature of conditional

Content towering over the footer

Using jQuery, learn how to successfully call a selector from dynamic content

Steps to conceal a <select> element and reveal it by clicking a button

Editable content <div>: Cursor position begins prior to the placeholder

What is the process for setting dynamic variables as CSS content within Vue.js?

New to CSS Media Queries? Discover the Correct Way to Define Element Height!

The arrangement of my inline-block divs is oddly meandering in a zig-zag pattern

Forcing the display of invalid-feedback in Bootstrap 4 is crucial

"Choosing the text within an <a> tag: A step-by

Achieving vertical alignment in Bootstrap for card header

Using Javascript to access the index of an element that has been checked and

Alignment and stretching characteristics of three divs (one with a set height and two with uncertain heights)

Limiting style changes to specific labels in Highcharts

Enable Component to Exceed to the Following Line

Challenges related to height