CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sushi
Sushi

Reputation: 676

How to put a text inside a div till it's height limit?

i want to put a <p>inside a div. This div is 200px height for example, what i want is : when the <p> is higher than 200px the rest of the paragraph is automatically added to a second div, in order to have a : news paper two columns style. So i need to write and when the first div (that is the first column) is full, the paragraph will be displayed on the second div (200px height too ). Please just take a look to my simple code.

<div class="content">
<div class="first">
    <p> Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi 
    </p>
</div>


<div class="second">
    <p>
    </p>
</div>


.content{
width : 200px;
height: 200px;
}

.first{
width: 95px;
height:200px;
float:left;
background-color:yellow;
 }

.second{
width: 95px;
 height:200px;
float: right;
background-color:blue;
}

If you look at my JSFFIDLE example you can see the "HI"s exceeding the first div (the yellow one) how to automatically put those "hi"s into the second div (the blue one)

Thank you all.

Upvotes: 0

Views: 53

Answers (2)

mausworks
mausworks

Reputation: 1625

There is no way (without programming or JavaScript) to add "from one column, to another if height exceeds X", this sounds very much like a programming problem, doesn't it?

There are some CSS3-properties (column-count and column-width) which can do this, but if your site needs compatibility for IE9 and lower, then this is off the table.

There are some jQuery plugins (as with everything), which are compatible with IE9 and below. Such as Columnizer.

Upvotes: 0

Vi100
Vi100

Reputation: 4203

What you're trying to do is quite difficult without using CSS3 properties. If this is not a problem then check this great article to use these features: https://css-tricks.com/guide-responsive-friendly-css-columns/

Here you have the current support of these features, which is mostly supported by all browsers excluding, as always, old versions of Internet Explorer.

http://caniuse.com/#search=column

Upvotes: 1

Related Questions