SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Finland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed height table and overflow or something...

    Hey

    I'm rather new with css and i cannot figure, how can i made a table with fixed height and width that contains dynamically filled text, which should NOT resize height of the table.

    Is there any css answer to this problem? Sample layout would be:

    Code:
    <table width="400" height="400" class="fixedWin" cellpadding="6"><tr><td>
    <div id="container">
    This is where all the dynamically loaded text will come
    </div>
    </td></tr></table>
    Now, when text on table is filling, i'd like that text to "disappear" on the bottom of the table, when text rows height exceeds table height (=400). I have tryed to do it with max-height, overflow, flood,.. and so on, but my experince with css is limited and i cannot find solution by myself.

  2. #2
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to be sure that your div only goes to 400px than you need to use overflow. Using the following, if the content would extend farther than 400, a scrollbar will appear to allow the content to be read but kept within the 400px height defined:

    #container {
    height: 400px;
    overflow: auto;
    }
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Finland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I managed to do it now with next code:

    overflow-y: scroll;
    overflow-x: auto;
    max-height: 399px;
    max-width: 761px;
    height: 399px; /*set height for IE*/
    padding: 8px;

    BUT it seems, that opera v.7.54 makes some extra lines at the end of the container. Ie and mozilla works fine. Do you know, why is that? See demonstration, where i use that style:

    http://mcenter.artesaani.net/com/client.php

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Try using this instead of ie's proprietary code,
    Code:
    .container {
    overflow:auto;
    etc..................
    Paul


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
  •