www.webdeveloper.com
Results 1 to 9 of 9

Thread: Positioning div at bottom of cell or container

  1. #1
    Join Date
    Jul 2011
    Posts
    5

    Positioning div at bottom of cell or container

    Hi,
    I'm trying to rework this calendar:

    http://mcyc1.org/Calendar.html (Ignore everything before July 1st for now.)

    I've made good progress (I think!) but have a problem with positioning things in my day cells. The calendar is a table. The table height is set to 90px so that they have a reasonable size when empty. They do grow if necessary and that is fine. I use a div to position the date at the top left corner of this container. I put the events in divs - yes, there is some cleanup to do there, but that's not the question. I wanted to put the non-club related holidays, etc., at the bottom of each day. I have been experimenting with September 22nd as there are no other entries on that day. Inside the td I have a div of 100% height and width with no borders, margins or padding. I thought that would help me with positioning. But I cannot figure out a scheme for making the "Fall Equinox" reliably fall at the bottom of the cell. Keep in mind that the cell may grow in height and other events may be stuck above this one. I need a general scheme that will always work.

    If I ever figure this out I hope to have it generated with PHP and pull the events from a database.

    Thanks for any help you can offer.

    --Brian

  2. #2
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    267
    Hey Brian,

    I like layout challenges, but couldn't do this one with divs in the day cell. I kept having to sacrifice the flexibility. With a table in the day cell it does work:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <style type="text/css">
    body { 
    	font: normal .8em Verdana;
    	}
    .monthTable { 
    	border-collapse: collapse;
    	border: 1px solid black;
    	}
    .dayCell { 
    	width: 200px;
    	height: 200px;
    	}
    .dayInnerTable { 
    	height: 100&#37;;
    	width: 100%;
    	}
    .DateCell { 
    	height: 10%;
    	text-align: left;
    	vertical-align: top;
    	}
    .companyEventCell { 
    	height: 80%;
    	text-align: center;
    	vertical-align: center;
    	}
    .generalEventCell { 
    	height: 10%;
    	text-align: center;
    	vertical-align: bottom;
    	color: green;
    	}
    </style>
    </head>
    <body>
    
    <table class="monthTable" summary="">
     <tr>
      <td class="dayCell">	
        
        <table class="dayInnerTable" summary="">
         <tr>
          <td class="DateCell">22</td>
         </tr>
         <tr>
          <td class="companyEventCell">Crew Party!!</td>
         </tr>
         <tr>
          <td class="generalEventCell">Autumn Equinox</td>
         </tr>
        </table>
    
      </td>
     </tr>
    </table>
    </body>
    </html>
    For clarity purposes, I made it bigger than 90 px. Keep in mind that IE wants to make this cell grow in width while the other browsers in height, if the content gets too big. But in a real table, with adjacent cells within a confined setting, IE should start acting normal. Let me know if this is not so.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  3. #3
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    267
    I don't know what I did yesterday that made IE make the table/cell expand in width rather than in height, but now that I'm adding a long Lorum Ipsum, it stretches vertically alright. With the width staying constant, also in a stand-alone setting. Let me know if you see other behaviour in your setting.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  4. #4
    Join Date
    Jul 2011
    Posts
    5
    Wow! Thanks. Looks good to me. The old calendar was all tables, but was a mess. I guess I should have just cleaned them up better in the first place.

  5. #5
    Join Date
    Jul 2011
    Posts
    5
    I just looked at my existing calendar in IE9. (I usually use FireFox.) It sure looks different there!

    The cells do seem to expand both horizontally and vertically, depending on what is making them expand. If a word is too wide for the cell, that cell (column, actually) will expand in width to accommodate the word. If there are too many entries for the height, the cell (row) will expand vertically to accommodate that. Sensible behavior, actually.

  6. #6
    Join Date
    Jul 2006
    Posts
    207
    Code:
    table.calendartable tr, table.calendartable td {
    height: 100%;
    }
    
    table.calendartable td {
    height: 90px !important;
    }
    
    div.seasons {
    bottom: 0;
    position: absolute;
    }
    That works for me in Firebug.

  7. #7
    Join Date
    Jul 2011
    Posts
    5
    I tried that but there are problems. If I set the height to 90px and don't let it grow, then dates with multiple events will not grow to acccommodate them. If I set the height of a cell (row) to 90px and allow it to grow as needed, and if a neighboring cell grows, then in a cell with only a season (or ultimately some other links) the season displays at the bottom of the 90px theoretical cell and not at the bottom of the actual, visible cell which is now higher than 90px. And if I put a season div in a cell that has already grown, and absolutely position it at the bottom of the theoretical 90px high cell, then it just disappears.

    Is there something I'm missing?

    Thanks.

  8. #8
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    267
    Quote Originally Posted by FatBear
    ... IE9 ... If a word is too wide for the cell, that cell (column, actually) will expand in width to accommodate the word. If there are too many entries for the height, the cell (row) will expand vertically to accommodate that. Sensible behavior, actually.
    Yes, in fact it is. But you can fixate the width by giving the table this attribute:
    Code:
    table {table-layout: fixed;}
    Then too long words will disappear behind the adjacent cell (IE) or go over it as if it isn't there (FF). But that is solved by:
    Code:
    td {word-wrap: break-word;}
    That breaks words up if they are too long, even without hyphen.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  9. #9
    Join Date
    Jul 2011
    Posts
    5
    Actually I like the cells to grow as needed. They don't grow much so they don't get stupid looking. (Unless I leave out a "<". Then they really get wacko.) Readability is the most important thing and that gets lost when things start wrapping and breaking and such.

    I think I'll go off and work on setting it back up as tables without the divs.

    Thanks.

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