Variable height of element?

[GezH]

Hello.

My HTML has a <ul> element, with list items simply defined as:

<li class="normal">
<p>Some text</p>
</li>

The stylesheet:

#colMain ul#digimedia li.normal {
width:300px;
width/**/:/**/245px;
float:left;
margin-bottom:1em;
padding-right:10px;
height:155px;
height/**/:/**/160px;
}

(This isn't my code btw, I'm editing someone else). Anyway, if the text in the <p> tags is too long, the layout breaks. What I would like is for the list to default to a certain height, but if the text is too long for it to fit, then it automatically adjusts itself to allow the extra text.

Is that possible?

 

[Vragabond]

You don't need the convoluted extra width and height specifications. They're probably there to take care of IE5, which has been dead for several years now.

What you're looking for for your design not to break is [tt]min-height[/tt]. This works just like you want it. When there is little content, the box will maintain certain height. If content exceeds that height, it will grow.

IE6 does not understand min-height, but applies the same rules to the actual height attribute. Google [google]IE conditional comments[/google] to learn how to apply the height attribute only for IE6.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]