CODEWITHSUNDEEP
htmlcsscss-float
sanjihan
sanjihan

Reputation: 6014

Make height of div fit text inside it

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>

Upvotes: 4

Views: 6283

Answers (5)

ameerosein
ameerosein

Reputation: 563

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/

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

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!

Upvotes: 3

frnt
frnt

Reputation: 8795

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.

Upvotes: 1

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

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>

Upvotes: 2

Alexander Pulido
Alexander Pulido

Reputation: 124

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>

Upvotes: 4

Related Questions