A Flash Developer Resource Site

Results 1 to 6 of 6

Thread: div borders not stretching full height

  1. #1
    Junior Member
    Join Date
    Feb 2007
    Posts
    4

    div borders not stretching full height

    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.

  2. #2
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    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

  3. #3
    Junior Member
    Join Date
    Feb 2007
    Posts
    4
    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

  4. #4
    Senior Member
    Join Date
    Apr 2002
    Posts
    2,849
    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/

  5. #5
    Retired Mod aversion's Avatar
    Join Date
    Jun 2000
    Location
    insomnia
    Posts
    7,917
    Is there a reason you're not using tables? This is what they're for, it would be perfectly semantic.

  6. #6
    Junior Member
    Join Date
    Feb 2007
    Posts
    4
    Quote Originally Posted by rdoyle720
    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

    Quote Originally Posted by aversion
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center