Adjust the height of a division element to match the size of the text contained

Is there a way to style my div elements so that the text inside will increase the height on smaller screens without changing the font? If the height doesn't adjust, the text will overflow. Here's an example of what I mean.

I've also created a pen if you prefer working with that.

I stumbled upon this answer which seems to address my issue, but I'm not quite sure how to make the necessary modifications.

#index-customer-title {
  margin: 40px 20px 40px 20px;
}
#test-wrapper {
  top: 0;
  left: 0;
  right:0;
  height: 240px;
  max-width: 1200px;
  text-align: left;
  margin: auto;
  position: relative;
}
#test-first {
  display: inline;
  width: 44%;
  float: left;
  height: 200px;
  margin-left: 3.33%;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
#test-second {
  display: inline;
  width: 44%;
  float: right;
  height: 200px;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
.quotes {
  font-style: italic;
  padding-top: 10px;
  font-size: 18px;
}
<div id="test-wrapper">
  <div id="test-first>
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS."</blockquote>
  </div>

  <div id="test-second">
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS."
    </blockquote>
  </div>
</div>

htmlcsscss-float

Answer №1

One alternative to using a static height is to utilize min-height or height: auto, which allows the height to adjust based on its content.

#index-customer-title{
margin:40px 20px 40px 20px;
}

#test-wrapper{
top:0;
left:0;
right0;
height:auto;

max-width:1200px;
text-align:left;
margin: auto;
    position: relative;

}
#test-first{
display:inline;
width:44%;
float:left;
min-height:200px;
margin-left:3.33%;
margin-right:3.33%;
margin-top:20px;
margin-bottom:3.33%;
text-align: left;
display:inline-block;
border:2px solid #d5d5d5;


}

#test-second{
dislay:inline;
width:44%;
float:right;
height:auto;
margin-right:3.33%;
margin-top:20px;
margin-bottom:3.33%;
text-align: left
display:inline-block;
border:2px solid #d5d5d5;

}

.quotes{
font-style:italic;
padding-top:10px;
font-size:18px;
}
<div id="test-wrapper">
<div id="test-first">
<blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "</blockquote>
</div>

<div id="test-second">
<blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "
</blockquote>
</div>
</div>

Answer №2

To address the issue at hand, consider using min-height: 200px instead of height: 200px for both test-first and test-second elements.

Here are some additional recommendations:

  1. If you have content below test-wrapper, it's advisable to clear the float:

    #test-wrapper:after {
  content: '';
  display: block;
  clear: both;
}

  2. You can also omit setting the height property for test-wrapper.

#index-customer-title {
  margin: 40px 20px 40px 20px;
}
#test-wrapper {
  top: 0;
  left: 0;
  right:0;
  /*height: 240px;*/
  max-width: 1200px;
  text-align: left;
  margin: auto;
  position: relative;
}
#test-first {
  display: inline;
  width: 44%;
  float: left;
  min-height: 200px;
  margin-left: 3.33%;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
#test-second {
  display: inline;
  width: 44%;
  float: right;
  min-height: 200px;
  margin-right: 3.33%;
  margin-top: 20px;
  margin-bottom: 3.33%;
  text-align: left;
  display: inline-block;
  border: 2px solid #d5d5d5;
}
.quotes {
  font-style: italic;
  padding-top: 10px;
  font-size: 18px;
}
#test-wrapper:after {
  content: '';
  display: block;
  clear: both;
}
<div id="test-wrapper">
  <div id="test-first">
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS."</blockquote>
  </div>

  <div id="test-second">
    <blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCREENS."
    </blockquote>
  </div>
</div>

Cheers!

Answer №3

Avoid specifying a fixed height for elements. Instead, consider setting a minimum height using min-height: something; this allows the element to expand as needed.

#index-customer-title{
margin:40px 20px 40px 20px;
}

#test-wrapper{
top:0;
left:0;
right0;
height:240px;

max-width:1200px;
text-align:left;
margin: auto;
    position: relative;

}
#test-first{
display:inline;
width:44%;
float:left;
/*    height:200px;*/
margin-left:3.33%;
margin-right:3.33%;
margin-top:20px;
margin-bottom:3.33%;
text-align: left;
display:inline-block;
border:2px solid #d5d5d5;


}

#test-second{
dislay:inline;
width:44%;
float:right;
 /*   height:200px;*/
margin-right:3.33%;
margin-top:20px;
margin-bottom:3.33%;
text-align: left
display:inline-block;
border:2px solid #d5d5d5;

}

.quotes{
font-style:italic;
padding-top:10px;
font-size:18px;
}
<div id="test-wrapper">
<div id="test-first">
<blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "</blockquote>
</div>

<div id="test-second">
<blockquote class="quotes">"THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. THIS IS TEXT. IT WILL OVERFLOW ON SMALL SCRENS. "
</blockquote>
</div>
</div>

Answer №4

Make two updates to your code by adding the following lines: display:inline-block and height:auto. These modifications will automatically adjust the height of your content div based on different breakpoints.

#test-first{
display:inline-block; /*Include this line*/
height:auto; /*Include this line*/
}

#test-second{
display:inline-block; /*Include this line*/
height:auto; /*Include this line*/
}

You can view the updated code on jsFiddle.

Answer №5

Some suggestions have been given to change the size of the div, but you can also adjust the text inside the div to fit by creating a script that resizes elements in a specific class until they fit. Then apply that class to your div.

Here's an example by @ThomasMcNaught:

<div class='container'>
    <div class='no-resize'>This text won't be resized and will overflow the div.</div>
    <div class='resize'>This text will be resized to fit within the div.</div>
</div>

Additionally,

.no-resize, .resize {
   width: 100px;
   height: 50px;
   border: 1px solid #000;
   color: #000;
   float: left;
   margin-left: 10px;
   font-size: 15px
}

See it in action at : http://jsfiddle.net/mn4rr/1/

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

The animation feature in Angular JS seems to be malfunctioning

Currently in the process of creating a slideshow using AngularJS, similar to the one found at this link, which includes navigation arrows (next and prev). Here is the HTML code snippet: <div class="carousel"> <div class="left"><input ty ...

cssanimationangularjs

Error message: `$.each` is not a valid function in ReactJS

I am facing an issue with my ReactJS (Create-React-App) project. It renders successfully on localhost when I run the command npm start, but encounters an error when I run the build command: npm run build. yarn run v1.16.0 $ react-scripts build Creating an ...

cssreactjstypeerrorcreate-react-app

Initial size of a div element with relative positioning

When a div tag has an absolute position, its height and width default to 0. In contrast, when it has a relative position, the default width is set to 300px. I am looking for a way to have a div tag with a width of 0 and a relative position... ...

css

What is the best way to incorporate quotes within inline CSS code?

Can anyone help me with inserting the following CSS into HTML? Here is the CSS snippet that needs to be converted to HTML: .group .circular-progress::before { ... content: "10%"; ... } This is what I have attempted so far: <div class="group"&g ...

htmlcssruby-on-railsruby

The mechanics behind CSS3 sliding gradient animation

Behold the ingenious code that effortlessly creates a sliding gradient animation without the need for even a single line of JavaScript: html { height: 100% } body { height: 100%; margin: 0 } @keyframes loading { from { background-position: ...

htmlcsscss-animationskeyframe

Enhance the URL with a search form for including the 'sku'

Currently, I have a search form on my website that successfully refreshes the page when the submit button is pressed, displaying the table of results below. The URL generated by this form is http://example.com/?txtKeyword=searchterm. However, I am looking ...

phphtmlmysqldatabase

Floating top menu

I am currently working on developing a sticky navigation bar that remains in place when scrolling down. However, I encountered an issue where using position: fixed; caused the text to overlap. Unfortunately, I am unable to use jQuery as my professor has ad ...

htmlcss

Mobile media queries are ineffective despite implementing the viewport meta tag

I am facing an issue that even though I have tried various solutions, my media queries are not working on mobile devices after adding the viewport meta tag. Can anyone provide insight into why this might be happening? Update: Upon further investigation, I ...

htmlcssmedia-queries

Prevent CSS from resizing text to the very bottom of the page

My goal is to prevent text from overflowing all the way to the bottom of the page, as I need a space for another div at the end. How can I create a gap between the text and the bottom of the page? Additionally, how do I restrict the size and position of t ...

csshtmltextconstraints

Learn the technique for creating line drawings with SVG elements or by utilizing HTML div elements

In my app, users can easily generate a request for creating an email with the organization's domain instead of filling out forms manually on paper. Once the form is filled out and submitted, it goes through an approval process starting with HR departm ...

htmlcssanimationsvgline

Looking for assistance with transferring a data attribute to a form redirection

I'm seeking assistance with a coding dilemma I've encountered. To provide some background, I have a list of items on my website, each featuring a 'Book Now' button that redirects users to different pages. Recently, I incorporated a mod ...

javascriptjqueryhtmlformsexpressionengine

Selection determines the value of two fields

This form has predefined values that are used to create a link, but the issue is that these values vary depending on the location. Can you assist me with this problem? <input type="radio" id="iconapp1" name="department" value="1250"/><label for ...

javascriptphpjqueryhtmlforms

Is there a way for me to perfectly align the image and the h1 header on the webpage?

I'm facing some challenges when it comes to aligning an image and an h1 tag on the same line. I've already tried using display: inline and inline-block, but they only affect the container of the two elements. I also set the width to 100% on the s ...

htmlcsscss-position

In Firefox, the image width may vary compared to the one that was originally inserted

Greetings to all! I have encountered an issue while using jcrop with Firefox as my browser. It seems that the image size does not match the actual dimensions, allow me to elaborate. The image appears to be 20% larger than its displayed size, despite being ...

htmlcssfirefox

The text alignment in Internet Explorer is off

After testing this website on both Firefox and Chrome, the alignment in the "Releases" section appears to be correct: However, when viewed in Internet Explorer, some of the text seems to be aligned in the center for unknown reasons. I have been struggling ...

htmlinternet-explorercssalignment

How can CSS be used to center multi-line text with the shortest line appearing at the top

I'm currently working on some html and css code that looks like this: <div style="width: 40em; text-align: center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du ...

htmlcsstextalignment

Issues detected with Foundation Block Grid in small size setting

I created a React component to display a series of div elements on a page using the Foundation Block Grid system to control the number of divs per row. However, I am facing an issue where the number of divs does not change when switching to a small-sized s ...

cssreactjszurb-foundation

The background image fails to show up on the mobile device display

Currently, I am working on an app with Ionic, but unfortunately, the background image is not showing despite all my efforts. I have gone through various solutions provided in previous questions, but none of them seem to work for me. Here is the CSS I am u ...

htmlcssangularjsionic-framework

Tips for incorporating CSS 4 custom properties into Angular components

Exploring the new possibilities of CSS 4 with custom properties, my goal is to utilize them in Angular. Traditionally, custom properties are used in the following manner: <div style="--custom:red;"> <div style="background-color: var(--custom ...

cssangular

Unable to make the Show/Hide Loading GIF function work as intended

Could someone please help me with my code? I'm trying to display a loading GIF image while waiting for an ajax request to complete. When the button is pressed, I want the loader to be shown until the data is returned from the server. I would greatly ...

jqueryhtmlcssajax