Two resizable divs positioned next to each other - first div adapts to the size of the second div

Question

Two resizable divs positioned next to each other - first div adapts to the size of the second div

I have a unique challenge with two divs positioned side by side. The first div contains random text of varying lengths, while the second div holds a random number of inner divs.

My goal is to have these two divs completely fill the space within their wrapper, with the text overflowing from the first div once the second div expands enough. This setup allows me to use a font-sizing plugin like jquery-textfill to adjust the font size as needed to ensure it fits within the first div.

Check out this full example with buttons to refresh the random text and add squares within the wrapper:

jsfiddle

Here is the HTML code:

<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

Here is the associated CSS:

#wrapper{
  width: 400px;
  height: 50px;
  background-color: lightgreen;
}

#left{
  float:left;
}

#right{
  float:right;
  overflow: hidden;
}

.square{
  margin-left: 2px;
  width: 50px;
  height: 50px;
  background-color: red;
  float:right;
}

Best regards, teamol

jquery html css

Answer 1

Answer №1

Here is the code snippet in HTML:

<div id="wrapper">
  <div id="right"></div>
  <div id="left"></div>
</div>

And here is the corresponding CSS code:

#wrapper{
  width: 400px;
  height: 50px;
  background-color: lightgreen;
}

#left{
  background-color: yellow;
  overflow: hidden;
}

#right{
  float:right;
  background-color: blue;
}

You can view the updated version on jsfiddle

Answer 2

Here is the code snippet in HTML:

<div id="wrapper">
  <div id="right"></div>
  <div id="left"></div>
</div>

And here is the corresponding CSS code:

#wrapper{
  width: 400px;
  height: 50px;
  background-color: lightgreen;
}

#left{
  background-color: yellow;
  overflow: hidden;
}

#right{
  float:right;
  background-color: blue;
}

You can view the updated version on jsfiddle

Two resizable divs positioned next to each other - first div adapts to the size of the second div

Answer №1

Similar questions

Is there a way to have a fixed width div positioned in the center of the screen, with two additional divs on either side

What is the solution to the question: "Hey there, time traveler. We are currently in an era where CSS prefixes are no longer necessary, thanks to the advances in prefix-less CSS

Setting text alignment in Bootstrap based on breakpoints

Locate all inputs containing a special attribute name, wherein a portion of the name corresponds to a JavaScript variable

Having trouble repositioning a div element in CSS

Converting a JavaScript variable into a jQuery object

Is it possible to adjust the vertical background-position independently?

Retrieve the URL from an iframe using Python and Selenium

Tips for fetching integer numbers in a string in JavaScript in sequential order starting from the left side

Is it possible to employ a jQuery handler as the selector for the .on() method?

Sculpting the excess from a div-generated HTML button

Automatically add values after successful Facebook login

Deselect the DOM element

Google Web Fonts: Exploring the World of Font Weight Variations

Overflow scrollbars do not appear on flex divs

The radius remains constant

Setting up a slider in Jquery UI

Double Checkbox

Optimizing Title Tags for Static Pages with Header Inclusion

Using jQuery delegate with anchor elements in Internet Explorer has proven to be