homepage Welcome to WebmasterWorld Guest from 54.161.155.142
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved