Force paragraph to use the maximum height available

Question

I have a series of divs which contain a small paragraph of text. I would like to make all the divs of the same height and vary the width as required to fit the paragraph.

If I was to do this in the vertical direction I would just set the width of the div. But if I set the height the paragraph turns into one line making the box as wide as possible.

How to I force the paragraph to have as many lines as the height will allow then increase in width as required

I have tried using min-height:100px for the paragraphs but the left over height is filled with white space and the text is still on one line.

Here is an example off what I am trying to do. As you can see the text is staying on one line. I would like to make it file the box vertically before making the box wider.

jsfiddle link: http://jsfiddle.net/Kj49B/

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul class="container">
    <li class="item">
        <a href="" class="title"  target="_blank">Title 1</a>
        <br/>
        <p>A summit aimed at reducing the risk of nuclear terrorism and involving some 50 countries is about to open in South Korea's capital, Seoul</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A long title</a>
        <br/>
        <p>Watch the latest news summary from BBC World News. International news updated 24 hours a day</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A much much longer title</a>
        <br/>
        <p><img src="http://www.montrealgazette.com/6355281.bin" align="left"/>Freshly crowned NDP leader Thomas Mulcair has vowed to make Prime Minister Stephen Harper's Tories his main adversary and he moved quickly to assure his own party that there won't be a housecleaning of staff</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A long title that goes on and on until it is very very long</a>
        <br/>
        <p>Pope Benedict XVI condemns drug-trafficking and corruption at a huge open-air Mass in central Mexico as part of his first visit to the country</p>
    </li>       
</ul>
</body>
</html>

Here is the CSS that goes with it:

body
{
    font-family:sans-serif;
}

.container
{
    width:95%;
    margin-left:auto;
    margin-right:auto;
    align:center;
}

.item
{
    margin-left:auto;
    margin-right:auto;
    display:inline-block;
    color:#000033;
    font-size:14px;
    height:180px;
    line-style:none;
    float:left;
    margin:20px;
    padding:20px;
    vertical-align:middle;
    border:1px solid #000033;
    border-radius: 50px; /*w3c border radius*/

    -webkit-border-radius: 50px; /* webkit border radius */
    -moz-border-radius: 50px; /* mozilla border radius */
}

.title
{
    color:#000033;
    text-decoration:none;
    font-size:22px;
    margin:0px;
    padding:0px
    line-height:1;
}

img
{
    height:90px;
    margin: 5px;
}

p
{
    display:block;
    margin:5px;
    width:minimum;
    padding:0px;
    min-height:80px;
    line-height:1.2;
    word-wrap:true;
}

You would probably want to use max-height instead of min-height if you want to force the element to not become higher than a certain value. — Christofer Eliasson, Mar 25 '12 at 21:20
What did you try already? Post some code or create a fiddle (http://jsfiddle.net) — yunzen, Mar 25 '12 at 21:22
This is most difficult than it should (that is, without tables). See eg http://www.positioniseverything.net/articles/onetruelayout/equalheight — leonbloy, Mar 25 '12 at 21:23
I have added code. I don't think a table will work because I want the boxes to drop down onto a new row if the browser window is re-sized. — Jonathon L, Mar 25 '12 at 22:45
Related : http://stackoverflow.com/questions/15227350/full-height-content-with-the-smallest-possible-width — Milche Patern, Mar 05 '13 at 15:27

score 2 · Answer 1 · answered Mar 26 '12 at 00:13

2

You can't using CSS. There is nothing I've ever come across even in CSS3 that supports this natively. What you're asking for is that width:auto act like height:auto but it won't because auto height is based on the concept of line boxes and there is no such thing as a "column box" (because text isn't a grid).

Tables with fixed height cells are the closest you'll get but you say in the comment above they don't suit you for other reasons. Even then you'll find the behaviour isn't particularly consistent or easy to control.

You can do this using javascript by detecting boxes that exceed a certain height then progressively making them wider until they don't. If javascript isn't an option either then I believe you are out of options.

answered Mar 26 '12 at 00:13

SpliFF

38,186
16
91
120

Thank you for your help. I thought that was probably the point I was getting to. I'll give the javascript approach a go. – Jonathon L Mar 26 '12 at 01:30
Personally I'd go for another design. The javascript approach is bound to be costly since the browser needs to recalculate the page after each resize. Since you also have several boxes this is going to result in long load times, high cpu usage and potential flicking if the browser tries to redraw between changes. If you think about it that probably helps explain why there is no native support for this. If you insist on it try starting from a minimum width and make your increments big (like 20px or something). – SpliFF Mar 26 '12 at 01:41
I have had another look. The boxes just jump down to a new line when the browser is re-sized so they them selves don't need to be readjusted. In the end I just adjusted the width based on the number of characters in the paragraph and added classes as required at the server side. – Jonathon L Mar 27 '12 at 01:35

score 1 · Answer 2 · answered Mar 26 '12 at 05:13

Hi you just have to give the width & height auto in your css that will work fine according to your requirement.

see your updated css :-

body
{
    font-family:sans-serif;
}

.container
{
    width:auto;
    margin-left:auto;
    margin-right:auto;
    align:center;
}

.item
{
    margin-left:auto;
    margin-right:auto;
    display:inline-block;
    color:#000033;
    font-size:14px;
    line-style:none;
    float:left;
    margin:20px;
    padding:20px;
    height:auto;
    vertical-align:middle;
    border:1px solid #000033;
    border-radius: 50px; /*w3c border radius*/
    -webkit-border-radius: 50px; /* webkit border radius */
    -moz-border-radius: 50px; /* mozilla border radius */
}

.title
{
    color:#000033;
    text-decoration:none;
    font-size:22px;
    margin:0px;
    padding:0px
    line-height:1;
}

img
{
    height:90px;
    margin: 5px;
}

p
{
    display:block;
    margin:5px;
    width:minimum;
    padding:0px;
    line-height:1.2;
    word-wrap:true;
    height:auto;
}

OR See the fiddle:- http://jsfiddle.net/Kj49B/7/

score -1 · Answer 3 · answered Mar 25 '12 at 22:42

-1

You should have this:

div {max-height:100px;}
p {height:100%;}

Leave the width unspecified. Of course, you could easily replace div and p with ids or classes if you wanted to.

My answer may not be valid since I saw your code sample after I posted this answer. I'll leave this up here in case it may be of some help.

answered Mar 25 '12 at 22:42

Lobabob

132
8

This doesn't stop the paragraph sprawling out on one line. I want it to wrap the text so it takes up the full height of the box. – Jonathon L Mar 25 '12 at 22:49

Force paragraph to use the maximum height available

3 Answers3

Linked