Suzanne — Sun, 14 Sep 2003 17:48:36 +0000

While playing, I just moved your styles to the style-sheet, but really, most of what you have in "title" and "content" should be in "box" alone.

div.title {
	font: italic bold 1.5em geneva, verdana, sans-serif; 
	padding:5px; 
	}

div.box { 
	width: 350px;
	height: 100%;
	border:3px solid #fa2; 
	background-color:#fa2;
	}

div.content {
	padding:5px; 
	background-color:#fda;
	height: 150px;
	}

img.content {
	margin-right: 10px;
	float: left;
	height: 150px;
        }

p {
	font: 1em geneva, verdana, sans-serif; 
	margin-top: 0;
	padding-top: 0;
        }

Suzanne — Sun, 14 Sep 2003 17:29:17 +0000

Do you need it to be a variable height?

if not (note the image height and the height of the div are the same):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD 
    HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIV Height Test</title>
<meta http-equiv="Content-Type" 
     content="text/html; charset=iso-8859-1">

<style type="text/css">
div.title {
    border:1px solid #fa2; 
    font: italic bold 14px geneva, verdana, sans-serif; 
    padding:5px; 
    background-color:#fa2;
    }

div.box { 
    width: 350px;
    height: 100%;
    }

div.content {
    border-left:2px solid #fa2; 
    border-right:2px solid #fa2; 
    border-bottom:3px solid #fa2; 
    padding:5px; 
    background-color:#fda;
    height: 150px;
    }

img.content {
    margin-right: 10px;
    float: left;
    }

</style>

</head>
<body>

<div class="box">

    <div class="title">Title</div>

    <div class="content">
    <img class="content" src="pic.jpg" height="150">
    <p>test test test test test test 
    test test test test test test test 
    test test test</p>
    </div>

</div>

</body>
</html>