Advanced Search

Results 1 to 2 of 2

Thread: <Div style...> help - Absolute positioning

  1. #1
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default <Div style...> help - Absolute positioning

    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.

    HTML Code:
    <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>
    Last edited by Snookerman; 06-27-2009 at 07:43 PM.

  2. #2
    Join Date
    Apr 2009
    Location
    Sydney, Australia
    Posts
    110
    Thanks
    15
    Thanked 1 Time in 1 Post

    Default

    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...

    Code:
    <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...

    Code:
    <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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •