Make height of div fit text inside it

Question

How should I style my div elements, so that the text inside of it, will make the height bigger on small screens? I don't want to change the font. If the height doesn't get bigger, than the text overflows. This is an example of this phenomena.

Also made a pen, if you prefer working with it.

I found this answer which I believe is what I am looking for, but didn't grasp how exactly should I do my 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 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 1

First of all, you can put min-height: 200px instead of height: 200px for test-first and test-second and that solves your problem.

Some suggestions:

1. Its better to clear the float if you have more content below test-wrapper :

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

2. Also you don't need to set height 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 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> 

Cheers!

Answer 2

Stop setting a height. If you need to, set a minimum height using min-height: something, and the will stretch 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 3

Instead of static height you can use min-height or height: auto, that way the height adapts to it's 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 4

Add two changes in your codes, display:inline-block and height:auto , this changes your content div height automatically at different break-points.

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

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

Here is the jsFiddle .

Answer 5

others provide you some solution for changing the size of the div, you can also force the text inside the div to change the size to be fit inside, for example you can right a script which resizes elements in a specific class until the fits in. and the use that class for you div class.

an example by @ThomasMcNaught:

<div class='container'>
    <div class='no-resize'>This text won't be resized and will go out of the div.</div>
    <div class='resize'>This text will be resized and wont go out of the div.</div>
</div>

and

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

fiddler at : http://jsfiddle.net/mn4rr/1/