[SOLVED] Expand div height 100% within table cell

[masteroleary]

I have scoured the net and am unable to find a solution without ridding my self of tables. I have a table that is divided into two columns. Within each cell there are div tags used specifically for placing an image in the bottom left and right corners of the content area. I can't delete the table and I need the divs for that reason. The problem I am having is that the height of the div is not filling the cell, leaving one column looking shorter that the other. If the divs werent used to place images at the very bottom of the column I would simply set the table bg color but that's not the case. The divs need to expand 100% within the cell so that both columns bg color a flush with each other and the bottom corner images align.

 

See my site here: http://matthew-oleary.com

and the css here: http://matthew-oleary.com/Library/CSS/main.css

 

Here are the areas of interest:

<table width="100%" border="0" cellpadding="0" cellspacing="6" id="servicetable">
        <tr>
          <td width="50%" valign="top"><div class="cell">
            <div>
              <hr />
              <h1>  { <span class="lightbrown">my</span><span class="darkbrown">Training</span> }</h1>
              <hr />
              <p>I am a master of the things I love. I read 1000 page technical manuals to ensure I know every trick of trade. I attend training seminars and conferences to keep myself current on the latest software and internet marketing techniques. I am passionate about art, graphics, web design and programming. Because of this I am always studying new technologies so that I can build, create and design without being at the mercy of another.</p>
              <hr />
              <h1>  { <span class="lightbrown">my</span><span class="darkbrown">Conviction</span> }</h1>
              <hr />
              <p>I am a strong believer that local businesses should support each other before those far and foreign if plausible. I also believe that it is the responsibility of these businesses to take on some form of community service to ensure the well being of our neighbors.</p>
              <p>My personal charity of choice is the Galaxy of Resources, an annual free conference that attracts hundreds of people in need of aid and information for their own disability or the disabilities of a loved one. You can visit them at <a href="http://www.galaxyofresources-brevard.org" target="_blank">galaxyofresources-brevard.org</a>.<br /><br />

              </p>
              <p></p>
            </div>
          </div></td>
        <td colspan="2" valign="top"><div class="cell">
          <div>
            <hr />
            <h1>  { <span class="lightbrown">expect</span><span class="darkbrown">More</span> }</h1>
            <hr />
            <p>When making an agreement with a client it is important to state exactly what work will be done and for what price, no assumptions. When everything goes smoothly and I know my clients are impressed with the work I've done I sleep that much easier. I never promise what I can't and I always tell it how it is.</p>
            <p>When working with me expect only the best. Over the last few years I have worked with several talented writers, photographers, programmers, videographers and designers. I have built a network of talent that supports me where I fall short. I don't claim to know everything (although I have mastered many fields) and should you need something you don't see here simply ask. I will introduce you to someone who can meet your needs and more.</p>
            <hr />
            <h1>  { <span class="lightbrown">real</span><span class="darkbrown">Pricing</span> }</h1>
            <hr />
            <p> Every project is unique and needs to be quoted accordingly. I evaluate each project depending on the work being done, the cost of the materials and the time it takes to complete. You will never be over charged by set pricing brackets and will always get what you pay for.</p>
          </div>
        </div></td>
        </tr>
      </table>

 

Css:

.cell {
background-color: #DADDD2;
border: 1px solid #333333;
background-image: url(../Images/tab.jpg);
background-position: left bottom;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.cell div {
background-image: url(../Images/tab2.jpg);
background-position: right bottom;
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 25px;
padding-left: 5px;
}

[SuperBlue]

Why stick with a table based layout, for something thats easier to do with css, a 2 column layout is one of the easiest layouts to maintain using css. And why cant you delete the table?

 

Anyway To make them the full height of the cells, did you try the css declaration "height:100%"?, it seam to do the trick on my PC.

 

 

One way to use image's as borders, or place them in the bottom cornors is, to decleare "position: relative;" on the Cells, and then use "position: absolute;bottom:0;left:0;" (in example), on the image/div itself. Having that said, i just asume it will work. Tables are before my time, and i've never really used them seriusly for page layout, other then the data they where ment for.

 

If you must go with the divs, then declare "position: relative;" on them, and "height:100%;". Then you could either use aditional divs to place the images using posistion:absolute;, or you could use the img tag to insert them on the page, using same styles as you would apply on the additional divs. Then use z-index to place stuff on top of the image if needed, or place the image with a negative value so it renders outside the table.

[masteroleary]

Well I am trying to convert the layout from tables to purely css but am having a little trouble. Your suggest worked sound. Thanks a lot. This whole conversion what quite a learning experience. I am so comfortable with tables I never bothers using css for layout before.

 

If you look at matthew-oleary.com you can see how everything fills the page 100% vertically. This is the table layout.

 

If you look at matthew-oleary.com/index2.php you will find the css layout. The problem is that the center row div (#content) of the second column (#mainbar) is set to 100% but expands the whole second column past the bottom of the page, creating a scroll bar.

 

I would like the center row to only expand enough to fill the page.

 

Any Ideas?

[masteroleary]

I am marking this post as solved since the original problem has been corrected. This new problem will be made into a new post.