Scrollable Div-Box in Table

Question

i have a table with two TD tags. in the first, i place an image. In the second, i place a "comment"-box. Its a div-box.

The problem is, that i want to have this div-box exactly to the right of the image in the second td-tag. And it shouldn't be higher than the image. So if the content gets too much in the div, there should be a scrollbar.

Soo far, i have this:

css-code:

#picKom {
    position:absolute;
    width: 350px;
    height: 100%;
    float: left;
    top: 0px;
    right: 0px;
    bottom:0px;
    overflow-y: auto;
    overflow-x: hidden;
    color: #ffffff;
    border: solid 1px #000000;
  }

and this:

        <table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"".$newWidth."px\" bgcolor=\"".$colorTwo."\">
          <tr valign=\"top\">
            <td>
              <a href=\"images/Gallerie/".$bild_name."\" target=\"_blank\"><img src=\"images/Gallerie/".$bild_name."\" width=\"".$width."\"></a>
            </td>
            <td>
              <div style=\"position:relative; height:100%;\">
                <div id=\"picKom\">
                  MYCOMMENTBOX
                </div>
              </div>
             </td>
           </tr>
         </table>

In Google-Chrome it works very well. But in Firefox, the comment-box is NOT in the right place. Its not in the td-tag. It is placed on the right of the window.

screenshot: http://www.pic-upload.de/view-21307692/google-chrome.png.html

Thank you guys.

Position:relative on a TD is undefined, see [here](http://stackoverflow.com/questions/4564638/using-position-relative-absolute-within-a-td). This [article](http://css-tricks.com/absolutely-position-element-within-a-table-cell/) may help. For layouts, it is more common to use DIVs than Tables. — Matthew Johnson, Nov 11 '13 at 21:14
height:100% sets the height in respect to the parent container. Since the parent has no height, height:100% means nothing to the browser. Is the image always a set height? You could set the div to that height, or use javascript/jquery to get the height of the image and set the height of the div to match. Add the rest of the html for the table please, including image. — Matthew Johnson, Nov 11 '13 at 21:29
sadly, the hight of the picture changes. its not a set height. how to get the height with javascript? — progNewbie, Nov 11 '13 at 21:37
I posted an answer before I saw your updated html, but it should work out for you. Let me know if there's any more issues. — Matthew Johnson, Nov 11 '13 at 21:47

Matthew Johnson · Accepted Answer · 2013-11-11T22:00:18.833

1

This is just a quick example, but as I mentioned in the comments, DIVs should really be used over Tables for layouts. This should fit with your code though.

The html:

<table>
  <tr>
    <td>
      <img src="http://lorempixel.com/output/animals-h-g-50-150-1.jpg" alt="image of kangaroo" id="mainImage">
    </td>
    <td>
      <div id="commentBox">
        Comment Box Content
        Comment Box Content
        Comment Box Content
        Comment Box Content
        Comment Box Content
        Comment Box Content
        Comment Box Content
      </div>
    </td>
  </tr>
</table>

The CSS:

td { vertical-align:top; }

#commentBox {
  width:100px;
  overflow-y: auto;
  overflow-x: hidden;
  border: solid 1px #000000;
}

The jQuery:

$(document).ready(function() {
    var newHeight = $("#mainImage").height();
    $("#commentBox").css({height:newHeight});    
});

The fiddle.

I'm not sure what the rest of your table looks like, but this is a generic layout. Add an ID to the image, and make sure you match the id in the selector for newHeight. Also match the DIV ID when setting the new height. Don't forget to do vertical align on the table cell, or the div will start in the middle.

edited Nov 11 '13 at 22:00

answered Nov 11 '13 at 21:44

Matthew Johnson

4,875
2
38
51

If i use this, the div-box is placed on the right place. But it doesn't scroll. It just makes the table bigger, if the content gets too much. – progNewbie Nov 11 '13 at 21:57
My fault, I removed the width from the comment box to keep example clean. I set it to 150px in the example and updated the fiddle. – Matthew Johnson Nov 11 '13 at 22:01
this doesn't chane anything, except, that the commentbox is just 150px what i didn't wanted. without the 150px, it has the right size, but just doesn't scroll and instead is making the table bigger in y-way. – progNewbie Nov 11 '13 at 22:08
It's scrolling in the fiddle. Are you setting the overflow-y:auto in yours? – Matthew Johnson Nov 11 '13 at 22:10
hm just tested it in your fiddle, very strange, because its working there. – progNewbie Nov 11 '13 at 22:11
This script uses jQuery. If you're not using it, you'll have to include it before it will work. – Matthew Johnson Nov 11 '13 at 22:11
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/41061/discussion-between-prognewfag-and-matthew-johnson) – progNewbie Nov 12 '13 at 23:15

Roko C. Buljan · Answer 2 · 2013-11-11T22:55:48.670

In the demo: Change image size or even resize the window:

LIVE DEMO

enter image description here

<div id='picKom'>

    <div id='pic'>
      <img src="http://placehold.it/680x508/f0f">
    </div>

    <div id='kom'>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p><p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing.</p><p> Software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p><p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing.</p><p> Software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

</div>

#picKom{
    max-width:800px;
    overflow:hidden;
    position:relative;
    margin:0 auto;
}
#kom{
    position:absolute;
    top:0;
    overflow-y:auto;
    height:100%;
    margin-left:65%;   /* Keep same */
}
#pic{
    width:65%;         /* Keep same */
}
#pic img{
    width:100%;
    max-height:500px;  /* Set thoughtfully */
    vertical-align:middle;
}

Scrollable Div-Box in Table

2 Answers2