CSS auto-grow page height based on text

Question

I have a pure CSS layout with a simple container that houses my text. The container has a min-height attribute.

The page content is generated from the database. The problem is as the page grows the text overflows the container that it is in.

How do I get around this?

Answer 1

My guess is you need to clear your floats I'd say..

Clearing Floats

<div id="myContainer">
   <textarea />
   <div class="clear">&nbsp;</div>
</div>

Answer 2

Answer 3

If you want to trigger hasLayout to the container without additional markup you can use

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  zoom: 1;     /* triggers hasLayout in IE */
}