Jump to content

Float DIV to Right of Image in Table Cell


barkster

Recommended Posts

I'm trying to float a div to the right of my thumbnails for each cell with a margin of 150px left so that it is always to the right of the thumb.  I want it relative to the table cell.  I cannot figure how to make it work.  Here is what I have.

 

<TABLE cellSpacing=0 cellPadding=0 border=0>

  <TBODY>

  <TR>

    <TD align=middle>

      <DIV style="position:relative;">

      <IMG src="Untitled Page_files/1971.jpg"/>

      <DIV id="div0" style="position:absolute; top:0;margin-left:150px;">

      <IMG src="Untitled Page_files/1971.jpg"/>

      </DIV>

      </DIV>

      <BR>1971</TD>

    <TD align=middle>

          <DIV style="position:relative;">

      <IMG src="Untitled Page_files/1971.jpg"/>

      <DIV id="div1" style="position:absolute; top:0;margin-left:150px;">

      <IMG src="Untitled Page_files/1971.jpg"/>

      </DIV>

      </DIV>

      <BR>1971

      </TD>

    </TR>

</TBODY></TABLE>

Link to comment
Share on other sites

What about something like this:

 

<html>
<head>
<style type="text/css">
td {
  border: 1px solid black;
  padding: 5px;
  width: 315px;
  text-align: center;
}

div#thumb {
  float:left;
  width:150px;
  padding-right: 5px;
}
div#caption {
  float:left;
  width:150px;
}
br {
  clear: both;
}
</style>

</head>

<TABLE cellSpacing=0 cellPadding=0 border=0>
  <TBODY>
  <TR>
    <TD align=middle>
         <div id="thumb"><IMG src="Untitled Page_files/1971.jpg" width="50" height="50" /></div>
            <div id="caption"><IMG src="Untitled Page_files/1971.jpg" width="50" height="50" /></div>
      <br />1971 - Yours with mine
      </TD>

<td>
<div id="thumb"><img src="images/image.gif" alt="" width="150" height="150"></div>
<div id="caption">Lorem ipsum dolor sit amet, consectetuer...  Lorem ipsum dolor sit amet, consectetuer...  Lorem ipsum dolor sit amet, consectetuer...  Lorem ipsum dolor sit amet, consectetuer...  Lorem ipsum dolor sit amet, consectetuer...</div>
<br />Just mine
</td>

    </TR>
</TBODY></TABLE> 

</body>
</html>

Link to comment
Share on other sites

thanks for the detailed response.  I was hoping to be able to float it over the next cell that way it doesn't expand the current or even if it covered the existing thumb that would be fine I just don't want to have the table expand/contract...  I may have to go about it a different way, maybe just a preview area instead.  thanks!

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.