homepage Welcome to WebmasterWorld Guest from 107.21.163.227
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Can a table cell contain an absolute element?
Bluestreak




msg:3483407
 6:09 pm on Oct 21, 2007 (gmt 0)

I have a three column layout and I am trying to get my absolutely positioned sidebars contained within <td> cells, but they always spill out anyway.

Here's a sample code to show what I mean:

.left-sidebar {
top:177px;
font-size:8pt;
position:absolute;
width:160px;
left:5px;
}

<td><ul class="left-sidebar"></ul></td>

 

charlier




msg:3483466
 8:20 pm on Oct 21, 2007 (gmt 0)

I am a real novice at this absolute positioning stuff but with a bit of help from here I did get an absolute positioned left side bar to work, YMMV. I did not put my abs. pos. element in the td tags but just had a div to clear the space. I put the abs. position code at the bottom of the html page as I didn't want the SE to pick up the navigation menu at the top. It was a bit fussy to get the abs. pos. sidebar to center properly.

so:

<table width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr class='midrow'><td style="width:17.5%;background:#009999;">
<div id="clearleft">

</div>
</td>
..... rest of the page and at the bottom.
</table>
<div id="leftsidebar">
<?php
include("left_sidebar.inc");
?>
</div>

and for the css:

#clearleft {
width:100%;
height:1400px;
overflow:hidden;
background:#009999;
}

#leftsidebar{
position:absolute;
top:320px;
left:15px;
width:15%;
height:1350px;
background:#009999;
text-align:center;
}

Bluestreak




msg:3483944
 2:07 pm on Oct 22, 2007 (gmt 0)

I looks like you placed the sidebar outside the table though. Not sure this will work with my setup though.

Global Options:
 top home search open messages active posts  
 

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

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved