Script position using DIV

Forum Moderators: open

Message Too Old, No Replies

Script position using DIV

Cliffy_x

9:20 am on May 6, 2011 (gmt 0)

Hello,
I have a script on my web page which I need aligning at the top of a table, I can only align it to the right or left.
I'm currently using
<div style="float: right">
as the code to align to the right.
Can anybody help me move this to the top of the table?
With or without a DIV tag?

Thanks
Chris.

rocknbil

6:08 pm on May 6, 2011 (gmt 0)

welcome aboard cliffy_x, don't have time to code it out and test but I'd try setting position:relative on the table cell and try position: absolute; top:0; right:0; on the div. You may not need the relative positioning on the cell but for non-table elements you do, so that the absolutely positioned child will stay within the parent.

Cliffy_x

9:13 pm on May 6, 2011 (gmt 0)

Hello rocknbill, thanks for your reply!
I have tried those 2 codes you gave me but it doesn't work for this specific table cell, there is nothing else in there, only the script inside the div.
If apply the position:relative to the actual table the div aligns right at the top, but it won't work for the cell, if that makes sense.

rocknbil

5:49 pm on May 9, 2011 (gmt 0)

You will have to wrap your floater, never tried it with tables this way. I used p and span in this working example to avoid div-itis.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
 <style type="text/css"> 
 table { width: 500px; margin: auto; } 
 table td { width: 100px; height: 100px; text-align: center; } 
 #floatie-wrap { position: relative; width: 100px; height: 100px; margin:0; padding:0; } 
 #floatie-wrap span { position: absolute; display: block; top:0; right:0; } 
 </style> 
</head> 
<body> 
<table border="1"> 
<tr> 
 <td> Text</td> 
 <td> Text</td> 
 <td> Text</td> 
 <td> Text</td> 
 <td> 
 <p id="floatie-wrap"> 
 <span id="floatie">Top and right</span> 
 </p> 
 </td> 
</tr> 
<tr> 
 <td> Text</td> 
 <td> Text</td> 
 <td> Text</td> 
 <td> Text</td> 
 <td> Text</td> 
</tr> 
</table> 
</body> 
</html>