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.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100% div in table cell

    Hi,

    I know that there is a lot of similar threads in many forums but none of them helps me with my problem.
    I have page as follows:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
      <head>
        <style type="text/css">
        html,body {
        	width: 100%;
        	height: 100%;
        	overflow: auto;
        	margin: 0px;
        }
        </style>
      </head>
      
      <body>
        <div style="width: 30%; height: auto; border: 1px dotted red">
          <div id="div1" style="background-color: blue;">
            <table style="width: 100%; height: 100%;">
              <tr style="width: 100%; height: 100%">
                <td style="height: 100%; width: 50%; border: 1px dotted black;">
                  1<br> 2 
                  <br>
                </td>
                <td style="height: 100%; border: 1px dotted black;">
                  <div id="div2" style="height: 100%; background-color: red;">.</div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </body>
    </html>
    What I would like to achiive is to stretch(vertically) div with id=div2 to entire table cell (what exactly heppens in Firefox) in IE.

    I spend few hours trying to do this but I dont have any other idea.
    What is important:
    the most outer div must have height set to auto (or something that allows to autoresize to its content), and page have to be run in standard mode.

    Regards
    Daniel

  • #2
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I dont want to reply to my own posts but i found another (simplier I think) example of the same problem:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body style="width 100%; height 100%;">
      <table style="width: 30%; height: 0%;">
        <tr>
          <td style="border: 1px dashed black;">
            <div style="height: 40px;">.</div>
          </td>
          <td style="border: 1px dashed black; height: 100%">
            <div id="choosenOne" style="height: 100%; background-color: red;">.</div>
          </td>
        </tr>
      </table>
    </body>
    </html>
    How to force div(id="choosenOne") to fill all avalibale cell height (like in Firefox) in IE ?

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Can I just ask... For what reason are you trying to place a div inside a table cell?

    Divs are page divisions for layout and table cells are containers for tabular data. So, what are you planning to actually place inside this div?
    Last edited by Doctor_Varney; 11-21-2008 at 08:02 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Im doing so because I would like to poistion elements inside cell relative to cell itself. Setting position:relative to TD i undefined (not works in Firefox) so I want to add div (with position relative) to this cell and position elements inside div relative to this div.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    dlipski, do you know why tables for layout is stupid ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by dlipski View Post
    Hi,

    Im doing so because I would like to poistion elements inside cell relative to cell itself. Setting position:relative to TD i undefined (not works in Firefox) so I want to add div (with position relative) to this cell and position elements inside div relative to this div.
    Hmm... This is an over-complicated solution to your design's requirements.

    Try losing the table altogether. Use divs for what they are meant. You can stack them, you can size them and you can position them, without any need for a table. I'd say your table is completely and utterly redundant and making what should be an easy job more complicated than it needs to be. I can see why you've come to the conclusion you need divs, to control content inside cells, but you're underestimating the potential of the div, to help control your layout.

    So, whatever it is you're trying place in a table cell, you can place inside a div. Style up the div and style up the elements inside it and hey presto!

    Hope this helps. If you get stuck, just ask. I'll try to help if I can, but there are always people here, who will be willing to help you use the elements at your disposal sensibly.

    Last edited by Doctor_Varney; 11-21-2008 at 09:39 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #7
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    I've read a lot of articles about why to use div to layout pages instead to using tables.
    Im in situation when I have to use table (dynamic cell size adjustment).
    The problem I have is to position elements inside cell relative to this cell. Could you help me with this ?

    And one more:
    Im not working on web site, Im working on web application so many of arguments from "use div instead of tables" has na value.

    Regards
    Daniel

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Fair enough, although it might have been more helpful to mention this beforehand. You should state what your project entails, in future, so as not to waste people's time.

    Moving on...

    Style the table. Remove the superflous divs and apply padding to the data cells. Cells will auto stretch with the content.

    At this point, I can't offer any more than this because you are not being clear about your purpose. But if your intention is to have the whole of the cell red, regardless of size, then you can style it up to be so, using td background.
    Last edited by Doctor_Varney; 11-21-2008 at 07:22 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

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