SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div Overflow problem

    Hi Iíve recently been designing a dynamic resizing website with css (well some of it ) which has been going well until I wanted to put some content into a div tag which is situated in the middle of the screen of a table cell. Currently the height and width is set to 100% which works fine in IE but not in firefox where it continues to make the div bigger then the available space in the table cell. Basically I'd like it to go to the maximum space of the table cell and then display a scroll bar. I've had a look round for this problem and I understand that firefox is doing the correct behaviour, but obviously I donít want this. A large part of my searching included this forum but I could not find anything relevant to my situation as I'm putting the div inside table not on the page body root.

    Here is the prototype page Iíve been working on:
    Test Page

    So far the only solution Iíve found for this is to make a JavaScript to dynamically fix the height values as the webpage is resized but since java script can be turned off and the piece of code Iíve tested throws a blocked content message in ie, I wish not to use it.

    Any help on this would be appreciated thanks!

  2. #2
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    div inside a table cell, sounds like a tabular layout.
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't specify a width for the div. It's a block level element and those automatically take up 100% of the space they have available. For the height I think what you need to do is again not specify a height for the div. Instead give the table cell the height and assign the div's overflow property to scroll. I'm not positive that this will work but that's what I'd try.

  4. #4
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh you would of thought so but with firefox's infinate wisdom it doesn't work. I think the problem is that the table cell that the div tag is in also has a height and width of 100% and because firefox treats 100% differently to ie (i.e. it seems to treat it as 100% of the data rather then 100% of the available viewing space) it messes the rest of the display up to render all the data.

    Is there anything I can do to stop the div from expaning to much before it hits the bottom of the cell its in? Or is there anything else I can put the content in that will give me a scrollable area? (not iframes already tried them cause I want it to work with forms aswell, with the submit outside the iframe the input boxes inside it doesnt seem to be included in the form post.)

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically the problem that you're hitting is that a table cell by nature will expand its height to fit the content. The only way around this is to give the table and/or the div a specified height.

    Is there a reason you've decided to nest all of this in tables? I think what you're trying to accomplish can be done much more simply in straight CSS.


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
  •