I have nested div where I want the height of the outer div to be fixed, and for the inner divs to be truncated if too tall to fit inside.
The inner div's should also be centered vertically if they are shorter than space available in the outer div.
How can I achieve this? Here's my code so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style type="text/css">
span#adTitle
{
font-family: arial, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
color: #336699;
}
span#adDescription
{
font-family: arial, sans-serif;
font-size: 11px;
float: left;
top: 12px;
}
div#ads
{
width: 500px;
height: 60px;
background-color: #ff0000;
padding: 10px;
border: 1px solid #999999;
}
div#ad
{
float: left;
width: 150px;
text-align: center;
background-color: #f5f5f5;
border: 1px solid #999999;
}
div#spacer
{
float: left;
width: 2;
}
</style>
<body>
<div id="ads">
<div id="ad">
<span id="adTitle">
<a href="" target=_top>Compare Travel Insurance</a>
</span>
<span id="adDescription">
Online travel insurance comparison of all the insurance companies. Compare and save. Buy online. Designed for consumers who want to be informed.
</span>
</div>
<div id="spacer"> </div>
<div id="ad">
<span id="adTitle">
<a href="" target=_top>Online Travel Insurance - Free Trip Info</a>
</span>
<span id="adDescription">
Instant online quotes, applications and fulfillment. Get a quote, buy and print your travel insurance documents online today.
</span>
</div>
<div id="spacer"> </div>
<div id="ad">
<span id="adTitle">
<a href="" target=_top>Objects Pty Ltd</a>
</span>
<span id="adDescription">
For all your Java needs.
</span>
</div>
</div>
</body>
</html>
