How to extend a div box(menu) based on the amount of text entered in that div?

Question

I've been wondering how can I extend my div box square, when necessary, parallel to the amount of text I'm typing. Let me illustrate my question with an example:

http://postimg.org/image/l4mrkj0bh/

The text is much more than the the box itself, so it overlaps. But If I have a shorter text, it is not a problem, because the box's size is the same, static. I want to make it dynamic.

Here is the CSS of the div box:

#centercol {
position: relative;
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
width: 52%;
float: left;
border: 2px solid #354350;
border-radius: 5px;
-moz-border-radius: 5px;    
height: 400px;
margin: 5px;
padding: 5px;
}

I can't even imagine how can this be done, but I've seen such feature in e107's news system.

Your help would be appreciated.

Answer 1

Instead of using height , try min-height instead:

#centercol {
  ...
  min-height: 400px;
  ...
}

I think the property name itself is self-explanatory.