floating a div across the whole width and height of a table cell

cosmicbdog · #1 Feb 1st, 2008, 08:46

I have a cell and I'd like to have a div stretch the height and width of that cell. E.g.:

<table><tr>
<td>
<div style="background: url('transparentshadowbg.jpg') top left repeat-x; width: 100%; height: 100%;"></div>
stuff inside the cell
</td>
</tr></table>

Long story short, the effect I'm attempting to create is a shadow from the edge of the cell like what actual windows do in OSX. I know this isn't a compatible thing with IE but our whole team is on Safari and this is a private backend application we are just sexying up.

I've currently got the shadow bg set on the <td> underneath everything, but when there are form <input>'s they are above the shadow so it ruins the effect. We'd like to see this shadow slightly over the top of everything. You can see the attached image to see how it looks now.

Aso · #2 Feb 1st, 2008, 10:28

I'm not sure if this would work, but try setting the z-index of your div to something relatively high. For example

Code: Select all

z-index: 5000;

If this fails, you can always just pad out the div, so the inputs don't come as close to the edge.

cosmicbdog · #3 Feb 1st, 2008, 10:46

I had tried what you suggested already, but tried it again... still no cigar though... it seems the 'height: 100%' on the div doesn't seem to do anything as in its nowhere to be seen, but if I give it a fixed height like 800px it will be 800px high but just pushes the content below it downwards...

Here is the full code:

Code: Select all

		<td valign="top" style="width: 400px;" id="leftcolumn">

			<div style="position: relative; top: 0px; left: 0px; z-index: 5000; background: url('/images/bg-affiliateleft.png') top right repeat-y; border-bottom: 1px solid #cccccc; width: 100%; height: 100%;"></div>

        	<iframe onmouseover="document.getElementById('leftcolumn').style.width='400px'; document.getElementById('leftcolumn').className='shadeout'; document.getElementById('rightcolumn').className='shadecover';" 
        		id="applet_lister" 
        		name="applet_lister"
        		scrolling="no" 
        		src="applet_afflister.php<? echo '?random=' . rand(1000,666999);
        		
        		
                if(isset($_GET['affiliate_login_id'])) 
        	    { 
        	        echo '&amp;affiliate_login_id=' . $_GET['affiliate_login_id']; 
        	    }
        	    ?>" style="position: relative; z-index: 0; width: 100%; height: 100%; border: none;"></iframe>

			
			
		</td>

I could just pad the input fields over, but the way I've set this application up is that as you scroll over the right window pane, it minimizes the view of the left window pane to a very small amount so there is actually a lot more that the image I attached above is being covered by the right pane.

Any ideas?

cosmicbdog · #4 Feb 1st, 2008, 14:26

I've moved the code beyond the <table> format... here is the complete code below now with the left and right cells... can anybody advise on how I could do this better??

Code: Select all

<div style="float: right; width: 92%; height: 100%;" id="rightcolumn" style="border-left: 1px solid #cccccc;" onmouseover="document.getElementById('leftcolumn').style.width='8%'; this.style.width='92%'; document.getElementById('leftcolumn').className='shadecover'; document.getElementById('rightcolumn').className='shadeout';">
		
        <iframe id="applet" name="applet" scrolling="no" src="applet_affiliates.php" style="width: 100%; height: 100%; border: none;"></iframe>

</div>
		
		
		<div style="background: url('/images/bg-affiliateleft.png') top right repeat-y; float: left; width: 8%; height: 100%;" id="leftcolumn" onmouseover="document.getElementById('leftcolumn').style.width='30%'; document.getElementById('rightcolumn').style.width='70%'; document.getElementById('leftcolumn').className='shadeout'; document.getElementById('rightcolumn').className='shadecover';">

			
     	<iframe  id="applet_lister" name="applet_lister"
        		scrolling="no" src="applet_afflister.php" style="position: relative; z-index: 0; width: 100%; height: 100%; border: none;"></iframe>

</div>

If you notice the way I've got the 2 divs.. with the rollovers in order to adjust them I have to use percentages and on each mouseover, specificy the widths of each one... previously with <td>'s I could just specify the width of the first one and naturally the 2nd <td> (now replaced with a div) would automatically adjust. Is there a way to do this with divs? In other words, can I adjust the width of one div, and the div beside it will automatically adjust without altering it the same way table cells would adjust if you changed ones width?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Strange table cell height issue	niko79	Web Page Design	16	Jun 5th, 2008 10:14
How to make a table height equal to the browser height ?	subhadip	Starting Out	4	Sep 20th, 2007 07:56
Is there any way to decide cell width of excel.	priya	Other Programming Languages	0	Jul 26th, 2006 07:11
Need to align width of Float table with the table below	Vertabase	Web Page Design	4	Mar 8th, 2006 21:21
Table cell fixed width settings	autumn_whispers2me	Web Page Design	5	May 13th, 2005 13:00

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
floating a div across the whole width and height of a table cell