www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS <div> tables not taking height attributes

  1. #1
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700

    CSS <div> tables not taking height attributes

    Hi All,

    I have a <div> based table in CSS nested inside another <div> table.

    I can't seem to set the overflow:hidden attribute if there's a line of text in the cell. I know... you're asking "why would you want to?". It would take too long to explain, and it would also take too long to explain why I'm using in-line css. Suffice to say that in the former I want to, and the latter, because the page is generated dynamically, I need to.

    The point is, it doesn't matter how high I set the div, it will revert to the height of the line of text.

    I tried using
    HTML Code:
    <div style='display:table; table-layout:fixed; width:100%'>
      <div style='display:table-row'>
        <div style='display:table-cell; height:2px'>
          Some text
        </div>
      </div>
    </div>
    Of course, that doesn't even have the nested table and it still doesn't work.

    Can anyone tell me where I'm going wrong?

    Thanks
    CTB
    Oh Lord, please help me be the person my dog thinks I am.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,136
    I haven't used CSS tables and I've only browsed the W3C specs, but I suspect you're running into the way cell heights are calculated. I'm not certain, but I don't think you can set a limit directly because tables generally expand vertically to accommodate the content within the width of a cell. See: http://www.w3.org/TR/CSS21/tables.html

    You might be able to add another containing <div> to surround those shown in your example and set it's height and overflow properties. It's difficult to suggest a useful solution when you don't explain why you are using this elaborate mark-up to hold a single <div>/cell that you indicate may or may not have any content.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    Thanks. Yes, I'm thinking it might have something to do with cells in tables needing to accommodate whatever is in them.

    As for the elaborate markup, it's because I'm trying to give my old, tired content manager a more flexible design interface.

    In the new design, you can have up to nine rows of elements, and within each row, you can have up to nine columns. Each column is its own table... There need be no correlation between column widths from one row to the next.

    And to deliver one last layer of flexibility, each cell can be divided into three. Designing the page is then a simple process of telling the CMS what data or sets of data you want where.

    I tried using floating divs, but you can't apply a height to an in-line element so that didn't work. And because you can't apply a height, you can't control the verticle alignment of the content (which you can do in a div table. I also considered just allowing the user to place div containers wherever they liked, but decided that wouldn't work with dynamically generated content.

    Thanks again. If you have any more thoughts or suggestions, please let me know

    CTB
    Oh Lord, please help me be the person my dog thinks I am.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles