Topic: Div height resize issue solved?? Opinions needed.. (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=22826" title="Pages that link to Topic: Div height resize issue solved?? Opinions needed.. (Page 1 of 1)" rel="nofollow" >Topic: Div height resize issue solved?? Opinions needed.. <span class="small">(Page 1 of 1)</span>\

 
BillC
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Aug 2004

posted posted 08-05-2004 19:02

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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu