SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question percentage not pixels??

    Hey gang, I am trying to break an old habit of using tables to layout pages (hey, if itís not broke don't fix it... well its starting to break....). Anyway, it seems that everywhere I look, css seems to be pixel driven when it comes to height. I have a project for an intranet site (all clients are IE7), the page needs to look the same in all screen resolutions. The page will be split into 2 halves vertically, 70% on the top and 30% on the bottom. If I were to use tables, the html would look like this:

    <body>
    <div align="center">
    <table border="0" width="100%" id="table1" style="border-collapse: collapse" height="100%">
    <tr>
    <td>
    <div align="center">
    <table border="0" width="100%" id="table2" style="border-collapse: collapse" height="70%">
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>
    <table border="0" width="100%" id="table3" style="border-collapse: collapse" height="30%">
    <tr>
    <td width="33%">
    <p align="center">&nbsp;</td>
    <td width="34%">
    <p align="center">&nbsp;</td>
    <td height="33%">
    <p align="center">&nbsp;</td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    </table>
    </div>
    </body>

    This should be easy?? How do I accomplish this using css? Please help!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To reference 100% height of the screen, you need to set both html and body to 100% - then you can set the heights of two divs to be percentages of that. Note that you would have to deal with content which could exceed the height of either div.

  3. #3
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    many thanks Centauri, that took care of it


Bookmarks

Posting Permissions

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