If anyone's got a bit of time could they please take a look at my bit of code below and give me their opinion/advice.
It's been bugging me for days how to build a fluid column of divs which will include a floated image along with the text for div height resize... ie the image doesn't drop out of the box when the height taken by the text is less than the height of the image.
I've got this far and it seems to work:
Page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Stacked box test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="testbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box1">
<div>img src="images/image1.gif" width=50px height="50px class="imageFloat" />
text goes here etc.
<div id="spacer">
</div>
</div>
</div>
<div id="box2">
<div>img src="images/image2.gif" width=50px height="50px class="imageFloat" />
text goes here etc.
<div id="spacer">
</div>
</div>
</div>
</body>
</html>
...and the CSS (testbox.css):
#box1 {
background-color: #00CC33;
border: thin solid #000099;
height: auto;
width: 50%;
margin: 0px 0px 5px;
}
#box2 {
background-color: #00CC33;
border: thin solid #000099;
height: auto;
width: 50%;
margin: 0px 0px 5px;
}
.imageFloat {
float: right;
}
#spacer {
clear: both;
}
I'm checking it on a Mac using Safari and IE5.2 - works on both but would really appreciate some feedback as I'm fairly new to CSS.
Cheers,
Bill
OZONE Asylum
posted 08-05-2004 19:02
