Make <td> overflow scroll when it contains float img

jeffmatthews

11-13-2009, 12:24 AM

I have a <td> set to overflow:scroll. Within it, I have an image and some divs and spans.

I float the img left and let the others format around it.

The overflow:scroll does not work, and instead overflow is expanding the height of the <td>. I have the height of the <td> to 150px.

I will be having the number of spans vary within this <td>, and therefore, need it to scroll when the number of spans is higher.

Anyone have experience with this issue?

// returns html string to use for replacing innerhtml of the <td>. The <td> has class with style having overflow:scroll.

retVal='<div>'+stateName+'</div>';
retVal+='<div style="height:60px; width:98px; float:left"><img src="'+getFlagHref(stateAbbrev)+'" class="stateFlag"/></div>';
retVal+='<span class="stateWriteUp">'+getStateWriteUp(stateAbbrev)+'</span>';
return retVal;

Excavator

11-13-2009, 12:33 AM

Hello jeffmatthews,
I'm not sure how much help I'll be since I don't know anything about tables. Here is a little demo I worked up that scrolls the way you want but uses divs instead.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
#box {
height: 200px;
margin: 50px 100px;
overflow-y: scroll;
background: #ccc;
}
#box img {
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="box">
<img src="7W9C7507 fall.jpg" width="265" height="400" alt="description" />
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</body>
</html>

jeffmatthews

11-13-2009, 12:48 AM

Thanks, Excavator. I tried yours, and sure enough, it works.

I can't see why mine does not.

It might have something to do with the fact that my image is within a div which is slightly larger than the image in order to create a padding between the image on the left and the text to the right. I'll keep playing with it, but the outward appearance of my code tells me it should work just fine....

jeffmatthews

11-13-2009, 02:04 AM

Ha! I did like you and made show the overflowed material was within a div. All I did was encapsulate my stuff within a div and have the div be the only child of the td. It works, now. Don't know why, but it works! Thanks.