Make div expand for image?

KandieMan101 posted this at 16:33 — 14th September 2003.

Joined: Jan 2003

I am working on a section of a site i am creating and am having some problems.

You can view it here:
http://members.rogers.com/kandieman101/test.html

What happens is, since the repeated words "test" ends up not being as tall as the image, the image goes "outside" of the div. How can I make image NOT "be on top" and restrict itself to the div (therefore making the div taller)??

It displays the same in both Opera and IE6... Obviously I would like the lighter orange to go down more to surround the entire "block of content".

Hope you could follow that...

SonicMailer Pro
The best mailing list manager has just gotten better!
Click here for a full list of features!

Suzanne posted this at 17:29 — 14th September 2003.

She has: 5,507 posts

Joined: Feb 2000

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>

Suzanne posted this at 17:48 — 14th September 2003.

She has: 5,507 posts

Joined: Feb 2000

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;
        }