HTML DIV Table With Flexible Height/Width

Question

Currently I have a HTML table which looks like:

---COLM1---|---COLM2---|---COLM3---

data1         smalldata

data 2

data 3

NEW ROW 1     NEW ROW 2

The new row 1 shows the new row for column one right underneath the longest content, but for row 2 I want it to display right under small data.

The code I currently have which works for this example but not for what I want is:

/**-- 3 Column Table  Using Divs
Each Column can be any length
--**/       
.divTable{
width: 100%;
}
.divTableArticle{
display: inline-block;
vertical-align: top;
width: 23%;                     
}

.divTableRow{
clear: left;
padding-top: 15px;
margin-bottom: 10px;
}

And the html corresponds:

<div class="divTable">
 <!--AS MANY ROWS-->
       <div class="divTableRow">
           <!---AS MANY ARTICLES--->
           <div class="divTableArticle"></div>
       </div>
</div>

How would I modify my code to match my new requirements?

As I'm currently listing each rows data, would it be better to list each columns data?

JS Fiddle: Click Here

use word-wrap:break-word; property so big data will be sent to next line don't forget to set some width first — user1370510, Apr 03 '13 at 08:44
Tryed your suggestion: http://jsfiddle.net/C7jZT/ Doenst seem to have any affect — Lemex, Apr 03 '13 at 08:52
In your JS Fiddle example, what is that `smallData` you want to have your new row aligned with? And what is that `row 2`? — micadelli, Apr 03 '13 at 09:25
Small data is the article, I want to be able have each row in each column undernearth each other. Currently if Row1 Col1 one is long(height wise) Row2Col1 and Row2Col2 start at the same place where as Row2Col1 should be underneath it , and Row2Col2 should be higher up — Lemex, Apr 03 '13 at 09:30
@LmC so, in your JS Fiddle example, you want 2008 be where it is but 2007 just below 2012 and 2006 just below 2011? — micadelli, Apr 03 '13 at 09:39

micadelli · Answer 1 · 2013-04-03T10:17:45.657

If those articles are independent, and cannot be linked (eg. 2012 and 2007 as one pair) I guess that's not possible without positioning them (ie. using JS or jQuery). But for simplyfied HTML and CSS this the closest one I managed to get (which really doens't work like you wanted):

<div class="divTable">
    <div class="divTableArticle"></div><!-- Needed for removing whitespace
 --><div class="divTableArticle"></div>
</div>

.divTableArticle{
    display: inline-block;
    width: 33.3333%;
    float: left;
}

JS Fiddle

HTML DIV Table With Flexible Height/Width

1 Answers1