...

View Full Version : making <div> element fill a cell in a table



carelesshx
11-18-2008, 03:12 PM
Is it possible to make a <div> element fill a table cell vertically?

<table style="width:100%; text-align:center;" cellpadding="3em">
<tr>
<td style="width:50%;">
<div style="background-color:#FFEEEE; border:#FF3333 1px solid; padding:0.2em;">
<div style="background-color:#FFDDDD; border:#FF3333 1px solid;">
<a name="Getting_Started"></a><h3> <span class="mw-headline">Getting Started</span></h3>

</div>
<div style="margin:0.5em;">
<p>Using the ICT Wiki is easy! Click on the links below to get help on using the wiki
</p>
</div>
</div></td>
<td style="width:50%;">
<div style="background-color:#DFFFE1; border:#00FF66 1px solid; padding:0.2em;">
<div style="background-color:#B0FFB0; border:#00FF66 1px solid;">
<a name="Troubleshooting"></a><h3> <span class="mw-headline">Troubleshooting</span></h3>

</div>
<div style="margin:0.5em;">
<p>This is your first point of call for any problems you may be having:
</p>
</div></div></td>
</tr>
<tr>
<td style="width:50%;">
<div style="background-color:#D9ECFF; border:#3399FF 1px solid; padding:0.2em;">

<div style="background-color:#B0D8FF; border:#3399FF 1px solid;">
<a name="Software"></a><h3> <span class="mw-headline">Software</span></h3>
</div>
<div style="margin:0.5em;">
<p>Information about the software available around the school is found here
</p>
</div>
</div></td>
<td style="width:50%;">
<div style="background-color:#FFFFEA; border:#DDDD70 1px solid; padding:0.2em;">
<div style="background-color:#FFFFCC; border:#DDDD70 1px solid;">
<a name="Internet_and_E-mail"></a><h3> <span class="mw-headline">Internet and E-mail</span></h3>
</div>

<div style="margin:0.5em;">
<p>How to use e-mail, access the internet and solve simple problems
</p>
</div>
</div></td>
</tr>
<tr>
<td style="width:50%;">
<div style="background-color:#FFE888; border:#FF6633 1px solid; padding:0.2em;">
<div style="background-color:#FFDD75; border:#FF6633 1px solid;">
<a name="Getting_access"></a><h3> <span class="mw-headline">Getting access</span></h3>
</div>
<div style="margin:0.5em;">
<p>Most services in the school require a username and password to log on. Check here for details of how to log on, change your password and gain access to online resources.
</p>

</div>
</div></td>
<td style="width:50%;">
<div style="background-color:#EEEEEE; border:#BBBBBB 1px solid; padding:0.2em;">
<div style="background-color:#DDDDDD; border:#BBBBBB 1px solid;">
<a name="Online_resources"></a><h3> <span class="mw-headline">Online resources</span></h3>
</div>
<div style="margin:0.5em;">
<p>There are many resources available on the school network for all staff to use. Details go here.
</p>
</div>
</div></td>
</tr>
</table>
As you can see (hopefully), the bottom-right cell is shorter than its neighbour and is not correctly aligned. I want the <div> element contained in the cell to be aligned to the top of the cell, and to fill the full height of the cell. Unfortunately I can't remember the proper combination of align, padding and margin properties to make it work.

(PS I know it looks messy, it looks much nicer when it's in the wiki ;))

abduraooft
11-18-2008, 03:41 PM
Can we have a link to your page?

carelesshx
11-18-2008, 03:43 PM
Can we have a link to your page?
Sorry, intranet only :(

carelesshx
11-18-2008, 03:54 PM
Here it is (http://en.wikipedia.org/wiki/User:Careless_hx/sandbox) (sort of).

tomws
11-18-2008, 05:04 PM
Apply a height:100% to the style of that div and each parent element. A quick test here makes it work when I regress to the parent table row, except that the div padding kind of breaks it. Balancing the cell/div styles should fix it.

carelesshx
11-19-2008, 11:40 AM
Apply a height:100% to the style of that div and each parent element. A quick test here makes it work when I regress to the parent table row, except that the div padding kind of breaks it. Balancing the cell/div styles should fix it.
Can you post the code you used to make it work? Setting the height in the outer <div> was the first thing I thought to do, but it doesn't seem to work for me.

tomws
11-19-2008, 02:16 PM
You have the height:100% on the div in question. Now, back up to the containing td and add height:100% there. Now, back up to the containing tr and add a height 100% there. That's what works for a quick check on FF3, anyway. I'm not at work right now so can't check cross-browser.

The CSS height property, if set as a percentage, compares itself with the parent container's height so that it 'knows' on what to base that percentage. Since the containing td in your case had no height, the div's height:100% was essentially meaningless. Likewise, the tr had no height for the td to check, and so on. Honestly, I'm not sure why it works here without a height on the table itself (but would appreciate an answer from a knowledgeable member).

carelesshx
11-19-2008, 03:22 PM
You have the height:100% on the div in question. Now, back up to the containing td and add height:100% there. Now, back up to the containing tr and add a height 100% there. That's what works for a quick check on FF3, anyway. I'm not at work right now so can't check cross-browser.

The CSS height property, if set as a percentage, compares itself with the parent container's height so that it 'knows' on what to base that percentage. Since the containing td in your case had no height, the div's height:100% was essentially meaningless. Likewise, the tr had no height for the td to check, and so on. Honestly, I'm not sure why it works here without a height on the table itself (but would appreciate an answer from a knowledgeable member).
Works in firefox 3 but not IE... unfortunately the page will mostly be viewed in IE :(

tomws
11-19-2008, 04:02 PM
Which IE are you testing in? I took your code from the first post, applied the changes to all of the applicable elements (need to do it for all of the cells since the browser may be resized), and it renders the same on IE 6 and 7 as FF3. Code here (http://pastebin.com/m1d88a491).

abduraooft
11-19-2008, 04:04 PM
and it renders the same on IE 6 and 7 as FF3. Code here.No Doctype there, must be in quirks mode then.

Kim2
11-19-2008, 04:09 PM
Its odd how that last cell is showing this behavior as your the code is same for the other cells (color styling aside).

I was able to simulate full height using an empty div within the main div in the last cell. Tested in IE6, FF2 and Chrome.

<div style="height: 100%;">&nbsp;</div>

tomws
11-19-2008, 04:13 PM
No Doctype there, must be in quirks mode then.

Good catch! I'll go play with it and see what happens.

tomws
11-19-2008, 04:16 PM
Its odd how that last cell is showing this behavior as your the code is same for the other cells (color styling aside).


The matching left cell is the only of the three that go to three lines of text, thus stretching the tr/td/div.

carelesshx
11-19-2008, 04:50 PM
Which IE are you testing in? I took your code from the first post, applied the changes to all of the applicable elements (need to do it for all of the cells since the browser may be resized), and it renders the same on IE 6 and 7 as FF3. Code here (http://pastebin.com/m1d88a491).
Tested in IE6 and IE7, looked the same in both.

No Doctype there, must be in quirks mode then.
When testing the basic HTML file, it uses XHTML 1.0 transitional. When viewed in the wiki, it uses whatever the Mediawiki software generates... which, now that I look at it, is also XHTML 1.0 transitional.

Kim2: The cells in the top row of the table also behave in the same way if you add another line to either of them - it's just fortuitous that all the cells except the final one have the same height.

abduraooft
11-19-2008, 05:02 PM
How about simply adding a fake line at the end of the content to make the line numbers equal? Say,

<p>There are many resources available on the school network for all staff to use.
Details go here. <br/> &nbsp;</p> I can't find any simple/effective solution than this.

tosbourn
11-19-2008, 05:14 PM
I don't want to be "that guy" who hates tables for layout (in fact, I use tables for layout a lot still!) but since the data isn't tabular in nature it may be easier to do an all CSS alignment, then you should be able to get the boxes to fit beside each other neatly and take up the required amount of space fairly easily.

tomws
11-19-2008, 05:16 PM
I'm in the same boat as abduraooft, but this is my offering: set a fixed height on the each containing div (I used 150px here) and set overflow:auto (or the default overflow:visible). I would also make similar changes on all of the divs (via stylesheet, of course) so future text changes don't create the same problem.

abduraooft
11-19-2008, 05:16 PM
but since the data isn't tabular in nature it may be easier to do an all CSS alignment,
But that's a wiki generated content. Options are less, I think.

tosbourn
11-19-2008, 05:18 PM
But that's a wiki generated content. Options are less, I think.

Ah, apologies, I thought it was content for a wiki, not generated from a wiki.

carelesshx
11-19-2008, 05:55 PM
How about simply adding a fake line at the end of the content to make the line numbers equal? Say,

<p>There are many resources available on the school network for all staff to use.
Details go here. <br/> &nbsp;</p> I can't find any simple/effective solution than this.
The content within each cell (div elements included) is pulled from a separate page, the idea being that no-one should need to mess about with the front page. The contents of each cell is, therefore, subject to change, so this is a kind of a fiddly solution.

I don't want to be "that guy" who hates tables for layout (in fact, I use tables for layout a lot still!) but since the data isn't tabular in nature it may be easier to do an all CSS alignment, then you should be able to get the boxes to fit beside each other neatly and take up the required amount of space fairly easily.
I tried to create the same layout using CSS and <div> elements but fell into the same problem of getting each <div> to fill the height of its container - whether that container is a <div> or a table cell.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum