SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning div in table cell

    Hi,

    I have a very simple problem. I want to position a div at the bottom of a table cell, well actually a table header, but the concept should be the same.

    the table cells have another div, which may be of variable height, aligned to the top, followed by a second div, which I want to be aligned to the bottom.

    here is a simple example...

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> crap 2 </title>
        <style>
        td {vertical-align: top;}
        th {vertical-align: top;}
        .div1{border: 1px solid red;}
        .div2{border: 1px solid blue; height: 100%;}
        </style>
    </head>
    <body>
     <div id="container" class="container">
      <table border="1" style="vertical-align: top;">
       <thead>
        <th> 
         <div class="div1"> blah blah </div>
         <div class="div2">div2</div>
        </th>
        <th> 
         <div class="div1"> blah <br/> blah </div>
         <div class="div2">div2</div>
        </th>
        <th> 
         <div class="div1"> blah blah </div>
         <div class="div2">div2</div>
        </th>
       </thead>
       <tbody>
        <tr>
         <td>row </td>
         <td> one </td>
         <td> one </td>
        </tr>
        <tr>
         <td>two</td>
         <td>two</td>
         <td>two</td>
        </tr>
       </tbody>
      </table>
     </div>
    </body>
    </html>
    I want all the 'div2' divs to line up along the bottom on the table header. without specifying the height of the TH element, or div1.

    is it possible?
    Thanks.

    Lachlan

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one thought: maybe instead of two divs you could have two cells, with vertical-align top for the top cell and bottom fro the bottom cell.

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm that would be nice, but in my real world example the HTML is bieng generated by a JSF tag library (Richfaces) so I cant really control the HTML side of things, just the CSS.

    is there not a way to do this without changing the HTML?

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe something like this:
    HTML Code:
    <!doctype html>
    <html>
    <head>
        <title> crap 2 </title>
        <style>
    	th { border: 1px solid black; vertical-align: top; }
    	th th { vertical-align: bottom; }
        .div1 { border: 1px solid red; }
        .div2 { border: 1px solid blue; }
        </style>
    </head>
    <body>
      <table>
       <thead>
       
        <tr>
    	<th> 
    		<div class="div1"> blah blah </div>
    	</th>
    	    <th>
         <div class="div1"> blah <br/> blah </div>
    	</th>
    	    <th> 
         <div class="div1"> blah blah </div>
    	</th>
    
    	
    	<tr>
         <th>
    		<div class="div2">div2</div>
        </th>
    	<th>
         <div class="div2">div2</div>
        </th>
    		<th>
         <div class="div2">div2</div>
        </th>
    	</tr>
    
       </thead>
      </table>
    </body>
    </html>


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
  •