PDA

Click to See Complete Forum and Search --> : div borders not stretching full height



lvarney
02-27-2007, 05:12 AM
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:-
http://www.sussexdowns.ac.uk/lvarney/css-borders.asp

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.

catbert303
02-27-2007, 09:24 AM
A common solution to get backgrounds/borders to extend in this way it to use the "faux columns" technique described here - http://alistapart.com/articles/fauxcolumns/

Although, it does look like you're working with tabular data, so in this case I think using a table (hey, it's what they were designed for! :)) instead of an ellaborate collection of divs would be the best way to go. Here's a good resource that explains how to use tables "the right way" http://www.usability.com.au/resources/tables.cfm

lvarney
02-27-2007, 09:57 AM
thanks for this....i had quickly tried the "faux columns" approach but as my main div is relative and not absoloute i dont know where to make the background image appear for a;l of the borders.

thanks for both the links though, i just really wanted to do it in CSS as this is the only time i've had enough time to experiement with this amount of CSS. my <i>annoying</i> colleague said i should use tables but i thought i knew better :)

thanks for the help :)

rdoyle720
02-27-2007, 11:14 AM
Unfortunately what you're trying to do isn't how CSS layout works (unless you use display: table, which doesn't work in IE). Setting a height 100% will make the child be as tall as the parent, IF you set the height of the parent. But, it won't expand as the parent grows, it'll stay the same initial height. I wish it worked the way you're trying to make it work. :)

The way to do it is with the faux columns technique (or there's a new border technique that looks interesting). The code I start with for CSS layouts is here: http://www.alistapart.com/articles/negativemargins/

aversion
02-27-2007, 01:02 PM
Is there a reason you're not using tables? This is what they're for, it would be perfectly semantic.

lvarney
02-27-2007, 02:47 PM
I wish it worked the way you're trying to make it work.

so do i - i'm becoming more convinced that i'm going to have to use tables :(

thanks for the link anyway, i appreciate your help :)


Is there a reason you're not using tables? This is what they're for, it would be perfectly semantic.

because i thought i could do it with CSS, being quite new to using CSS for layouts i wasn't aware this problem existed with stretching borders.

i think i'm going to revert back to good old tables this time.