| Script position using DIV
|
Cliffy_x
msg:4308654 | 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
msg:4308863 | 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
msg:4308995 | 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
msg:4309997 | 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>
|
|
|
