How to make div with height limit?

Question

Sorry if my English has mistakes)). My question is How to make div with height limit? I mean, my div has some ul blocks for example:

<div>
 <ul>
  <li>First text</li>
 </ul>
</div>

And my DIV has height 280 px. When I try to add more and more <li>smth...</li> - it's going lower and lower, and after all of that my text gone below my div's height limit.

Don't propose float:left, It means, that all my text will adds in horizontal line, but I want to achive Vertical height limit. Smth like newspaper, you know.

Logic: My text have to go lower and lower before my height limit, after that, my text have to split itself, and continue move down on the new vertical line into same div element.

Image for those who don't understand what I am talking about:

Have you read http://stackoverflow.com/questions/4923/wrapping-lists-into-columns ? — Raad, Feb 21 '13 at 12:30
@entonio - thanks. I'm not shy - I'll take an upvote anytime ;) — Raad, Feb 21 '13 at 12:54
See this question http://stackoverflow.com/questions/297686/css-max-height-property — Adriano Silva, Feb 21 '13 at 14:17

score 1 · Accepted Answer · answered Feb 21 '13 at 21:16

I am not sure if it's possible to incorporate a width within this script but it will allow a flow from column to column. I also noticed that this does not seem to work within IE.

<head>
<style> 
.columnFlow
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:2px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
</style>
</head>
<body>

<div class="columnFlow">
This text will flow within 3 different columns. The only think that I am unsure about is how to get this to work within IE. Also I am not sure how to specifically set the width. It appears as though it even spreads the provided text evenly within the amount of columns that the developer chooses. I hope this helps.
</div>

</body>

There are a few additional version of this on the W3C site. I hope this helps! http://www.w3schools.com/css3/css3_multiple_columns.asp

How to make div with height limit?

1 Answers1