Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    making <div> element fill a cell in a table

    Is it possible to make a <div> element fill a table cell vertically?
    Code:
    <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 )

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Can we have a link to your page?
    Sorry, intranet only

  • #4
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here it is (sort of).

  • #5
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    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.

  • #6
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    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.

  • #7
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    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).

  • #8
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    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

  • #9
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    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.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    and it renders the same on IE 6 and 7 as FF3. Code here.
    No Doctype there, must be in quirks mode then.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    tomws (11-19-2008)

  • #11
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    1
    Thanked 1 Time in 1 Post
    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.
    Code:
    <div style="height: 100%;">&nbsp;</div>

  • #12
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by abduraooft View Post
    No Doctype there, must be in quirks mode then.
    Good catch! I'll go play with it and see what happens.

  • #13
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by Kim2 View Post
    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.

  • #14
    New Coder
    Join Date
    Oct 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    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.
    Tested in IE6 and IE7, looked the same in both.
    Quote Originally Posted by abduraooft View Post
    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.

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How about simply adding a fake line at the end of the content to make the line numbers equal? Say,
    Code:
    <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 Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •