Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post

    Make <td> overflow scroll when it contains float img

    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?

    Code:
    	//  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;
    Last edited by jeffmatthews; 11-13-2009 at 12:33 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Code:
    <!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>
    <!--end box--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    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....

  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    87
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •