Welcome to WebmasterWorld Guest from 54.226.60.235

Forum Moderators: incrediBILL

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)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month