...

View Full Version : CSS Table Positioning



John_Saunders
12-12-2002, 06:02 PM
Does anybody know how I can do this? I've tried tons of different settings and I can't figure it out.

I want to position the layer with the small table based off the top left of my main table on my site, instead of absolute positioning from the top right of the browser. I want to center my entire page in the window but if I use absolute positioning it won't load in the right place for people with different resolutions.

Here are my current settings:


<div id="Layer1" style="position: absolute; left: 50; top:40;">
<table width="200">
<tr>
<td>small table over top of main table</td>
</tr>
</table>
</div>

<table width="700">
<tr>
<td>main table</td>
</tr>
</table>
</div>

Any help would be greatly appreciated.

Kiwi
12-12-2002, 06:27 PM
I suspect you don't need any tables at all. But, if you must use them, something like this might work:

<body style="text-align: center">
<div id="container" style="width:700px; text-align: left;">
<div id="righttable" style="float: right; width: 200px; right: 10px; text-align:left;">
small table
</div><!-- righttable -->
large table
</div><!-- containter -->
</body>
In this layout, the text will wrap below the right-floating div.

John_Saunders
12-12-2002, 07:20 PM
Kiwi,

I tried out your code and it made the small table appear at the right side of the main table, right above it. How can I make the small table appear on top of the big table (so it hides part of the big table) instead of just at the top of the page then the big table at the bottom.

I appreciate your help!


John

John_Saunders
12-12-2002, 07:32 PM
Nevermind! I figured it out:



.class {
position: absolute;
left: 200px;
top: 20px;
}

<div id="container">
<div id="Layer1" class="class">
<table width="200">
<tr>
<td>small table over top of main table</td>
</tr>
</table>
</div>

<table width="700">
<tr>
<td>main table</td>
</tr>
</table>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum