positioning

Hi

I have two tables, placed side by side.

Problem: the positioning varies when I change screen resolution. how do i fix it? I have been trying to google but i could not find a solution.

try the following code with different screen resolutions.


<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

<div style="position:absolute; top:1px; left:160px ">
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
    
</div>
¿

Open in new window

genius_geekAsked:
Who is Participating?
 
HagayMandelConnect With a Mentor Commented:
This will do it:
<div id="left" style="float:left; width:50%;">
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2 more content,  more content, more content, more content, more content, more content, more content, more content, more content, </td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</div>
<div id="right" style="float:left; width:50%;">
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2 more content,  more content, more content, more content, more content, more content, more content, more content, more content,</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>   
</div>

Open in new window

0
 
Tom BeckCommented:
It looks the same at every screen resolution in Firefox 11. The right table overlaps the left by about 15 pixels.

The only thing I could imagine that would change the appearance is increasing the text size thus increasing the space consumed by each cell. Table cells will expand as needed. Still, the right table will remain 160px left of the window edge but the overlap will increase as the cells get wider.
0
 
deegoy418Connect With a Mentor Commented:
I found very minor issue, which I have fixed, now you can use this code...

<div style="width:100%; position:relative;">
<table border="1" style="width:50%; float:left;">
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>
  <table border="1" style="width:50%; float:left;">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
    </tr>
  </table>


</div>

Please let me know if still you have any problem regarding the position.
0
 
deegoy418Commented:
Thanks tommyBoy
0
 
Tom BeckCommented:
??
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.