<Div style...> help - Absolute positioning

[roshancoorg]

Dear all,

This is a sample code. I want the items in the second <td> clause to stay at the TOP. please help me. Infact in the real code i have another table in the second <td> clause that i need to position at the absolute top.


<table>
<tr>
<td >




asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasd

fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfas

dfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa

sdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasd

fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfas

dfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa

sdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasd

fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfas

dfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa

sdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<

br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasd

fasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfas

dfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa

sdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>a

sdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>







</td>
<td>

<div style="position:relative;left:50px;top:10px;height:300px;width:300px">


This part should BE ABSOLUTE AT THE TOP not in the center! plz help



</div>


</td>
</tr>
</table>

[sniperman]

Hi there, the first question I would ask is what is the purpose of the table? Is the table being used for presentational layouts? If so you should consider div containers for the same purpose as they are more accessible.

Now. Placing data in a table constrains the data in the table to a fixed position. From what I understand of HTML, if you place a <div> within a <td> and position this absolute, the <div> is removed from the document flow (and from the <td> within which it was placed) and is positioned outside its containing block.

I'm not sure whether you want the "text" in the second column to appear at the absolute top of the screen or whether you want the actual <div> to appear absolute over the initial <td> like the code below suggests...


<table>
<tr>
<td>

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasd

fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfas

dfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa

sdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasd

fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfas

dfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa

sdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf

asd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasd

fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfas

dfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa

sdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasd

fasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfas

dfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa

sdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>a

sdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>asdfasdfasdfasdf

asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd<br>







</td>
<td style="background-color:red;position:absolute;left:50px;top:10px;height:300px;width:300px">

<div style="height:300px;width:300px">


This part should BE ABSOLUTE AT THE TOP not in the center! plz help



</div>


</td>
</tr>
</table>


If you simply want to vertically align the text in the second table column, simply replace all within your second <td> </td> code with this...


<td valign="top">
This part should BE ABSOLUTE AT THE TOP not in the center! plz help
</td>


The default for vertical-align : position is middle. You have to manually change the attribute.

tell me if this solves the problem.