www.webdeveloper.com
Results 1 to 4 of 4

Thread: DIV Tables

Hybrid View

  1. #1
    Join Date
    Sep 2008
    Posts
    6

    DIV Tables

    I am trying to use DIV's instead of tables. I want every other cell to have a green background and the others to have a white background.

    The problem is that when data on the white cell is larger than that of the other white cell in that row, the smaller one doesn't stretch to meet the height of the other "cell".

    Sounds simple but I am finding it isn't.

    Here is my HTML and my CSS.

    Thanks in advance!

    HTML Code:
    <div class="div-table basicinfo">
      <div class="row-no-hover">
        <div class="row-data tright">Name</div>
        <div class="row-data tleft">asdf asdf</div>
    
        <div class="row-data tright">Address</div>
        <div class="row-data tleft"><p>123 easy street</p><p>123 easy street</p></div>
      </div>
    </div>
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    .tright{
    text-align: right;
    }
    .tleft{
    text-align: left;
    }
    .div-table{
    width: 100%;
    float: left;
    border: 1px solid #ccc;
    margin: 12px 0;
    }
    .div-table .row-no-hover{
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    }
    
    .div-table .row-no-hover .row-data{
    float: left;
    width: 22.88%;
    padding: 0 1%;
    }
    .div-table.basicinfo{
    border-top: 0;
    border-right: 0;
    
    }
    .div-table.basicinfo .row-no-hover{
    background: #efefef;
    border-top: 1px solid #ccc;
    }
    
    .div-table.basicinfo .row-no-hover .row-data.tright{
    background: #efefef;
    }
    
    .div-table.basicinfo .row-no-hover .row-data.tleft{
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background: #fff;
    height: 100%;
    }

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    It won't stretch unless the heights are given.
    A solution is to give the containing div the same background color as the shorter of the 2 child div's.
    Most modern browsers support the table display properties, unfortunately IE doesn't.
    The data you are using is essentially table data, so you could use a table.

  3. #3
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Looks to me like the correct semantic tag to use for that data is <table>

  4. #4
    Join Date
    Sep 2008
    Posts
    6
    Well a real table is a likely possibility but the data is all dynamically generated therfore divs are just easier without col and row spans. Thought i'd give you guys all a shout see if anyone knew a trick.

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles