Question

Using Twitter Bootstrap, I have a div with the following css:

#notecard.hero-unit
{
    background-image: url("../img/notecard.jpg");
    background-size: cover;
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    height: 1%;
    position: relative;
    text-align: center;
    overflow: hidden;

}

Inside of that div I have a varying amount of text h2 with the following CSS:

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: bold;
  color: #333333;
  text-rendering: optimizelegibility;
}

In #notecard.hero-unit I am using overflow: hidden; and height: 1% because most times the text from h2 scrolls further than #notecard – so that job is being handled and #notecard now expands to the text inside of h2.

However, when h2 only has a line or two, #notecard is very small. I would like #notecard to be a default size – let’s say 300px and still accept the overflow if there is any.

I’ve tried setting height at #noteard and also height at h2 to 300px, but both ignore the overflow that I need.

Thanks.

Answer 1

I’d use a min-height on the parent of the H2:

<style>
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: bold;
  color: #333333;
  text-rendering: optimizelegibility;
}
.hero-unit {
  background-color: #eee;
  background-size: cover;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  min-height: 50px;
  position: relative;
  text-align: center;
  overflow: hidden;
}
</style>

<div class="hero-unit">
   <h2>Some Text</h2>
</div>
<br>

<div class="hero-unit">
   <h2>Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. Much more text. </h2>
</div>

http://jsfiddle.net/M9bX8/5/