Div borders not stretching full height

[lvarney]

I am having trouble getting the inner borders of cell-divs to stretch the full height of the row-div they are in. I have a table (written in divs) that has dynamic content in each cell, so for example the last cell has text that will wrap onto 3 lines and the right-border of this cell goes right down to the bottom of the div, however the cells prior to this one the right-borders of thos dont go any further than the bottom of the last line of text written.

You can view the actual page and it's code here:- snip

Here's a snippet of the code I have so far:-

DIV.base-layer {
border-top: solid #333333 1px;
border-left: solid #333333 1px;
border-right: solid #333333 1px;
border-bottom: solid #333333 1px;
color: #000000;
margin: 0.5em 12px 0.5em 12px;
padding: 0;
text-align: center;
width: 200px;
}

DIV.table-row-yellow {
background: #ffffee;
font-family: verdana;
font-size: 12px;
border-top: 1px #000080 solid;
border-left: 1px #000080 solid;
border-right: 1px #000080 solid;
border-bottom: 1px #000080 solid;
color: #000000;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
text-align: center;
width: auto;
height: 100%;
}
DIV.column1 {
border-right: 1px solid #000000;
float: left;
margin: 0;
padding: 0;
width: 14%;
height: auto;
empty-cells: show;
}

DIV.column2 {
border-right: 1px solid #000000;
float: left;
margin: 0;
padding: 0;
width: 3.2%;
height: auto;
}

DIV.column3 {
border-right: 1px solid #000000;
float: left;
margin: 0;
padding: 0;
width: 14%;
height: auto;
}

<div class="base-layer">
<div class="table-row-yellow">
<div class="column1">
<p class="text">Tuesday</p>
</div>
<div class="column2">
<p class="text">12</p>
</div>
<div class="column3">
<p class="text">Until 6:30pm John Webber From 6:30pm Sue Martin</p>
</div>
</div>
</div>

Solutions I've tried which haven't solved the problem:-
1) I've tried putting the right hand border style on the "text" class and making it height: 100%
2) Putting another div around each row and specifying it's height:auto and then the inner divs "table-row-yellow" height: inherit

Any help or pointers would be really appreciated.

[edited by: SuzyUK at 10:53 am (utc) on Feb. 27, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[scriptmasterdel]

Yes, this is a common problem i have run into alot while building websites.

Usualy the solution is to create a background image and apply it to the container so that no matter what the height is the background / border lines will always appear.

I have another solution to make this work, it may seem a little drastic but it works none the less.

If you apply a margin and a height that conflict with each of the "cells" this will basically trick the browser.

margin-bottom: -1000px;
padding-bottom: 1000px;

Then apply

overflow: hidden;

To the main wrapper / container and that will remove any unsightly height from view, in the fully complient browsers.

I'm not sure if there is any other solutions to a problem like this but if someone knows of one then i would very much like to know.

Omt: I read this on ejeliot blog a while ago so this solution is not mine.

I hope this helps.

Del

[lvarney]

the second solution works perfectly.

thank you very much for this, i really appreciate your help :)