CODEWITHSUNDEEP
csshtml
progNewbie
progNewbie

Reputation: 4832

Scrollable Div-Box in Table

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.

Upvotes: 1

Views: 159

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206565

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;
}

Upvotes: 0

Matthew Johnson
Matthew Johnson

Reputation: 5165

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.

Upvotes: 1

Related Questions