Question

I don’t think my question is difficult but I’m just a newbie in web design and this forum so hope that you can help me with this problem: I want to fix my image when slide down the content inside a div. You can take a glance about this two picture for easier to understand

So here you can see that when I click read more button the image will move along with the content but the problem is I want to fix it at the top left like beginning. Here is my sample format of code:

<div>
<table>
   <tr>
      <td>
         <table class="table1">
             <tr class="left">
                <td class="left-image">
                   <img>My image on the left goes here
                </td>
             </tr>
         <table>
      </td>
      <td>
         <table class="table2">
             <tr class="right">
                <td>My content on the right goes here</td>
             </tr>
         </table>
      </td>
   <tr>
</table>

I’ve tried many ways by setting the class or id for each element like table, tr, td that surround that image using css positioning to fixed it but it will move down whenever I scroll down the website or not even working so hope that you all can give me some solutions which can help me to overcome this problem and improve my bad programming skill. Thank you so much in advanced!

Answer 1

Maybe this:

<div>
<table>
   <tr>
       <td> <-- apply "vertical-align: top" to this anonymous td via CSS

?