Menu
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;
}
858
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.
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
