Even Column Height - Is This Even Possible

HTML & CSS
1

Hi, i have a page on my site that lists businesses in an A-Z directory list.

My page is split into 3 columns and i was wondering IF it is possible to code the 3 columns so that they spread out the content between then so that they stay the same height… let me try and draw this.

A I P
B J Q
C K R
D L S
E M U
F N V
G O Y
H X
Y
Z

The 3 columns above are uneven… is there a way of coding the 3 columns so that they are fluid (not sure if that is the right word) so that it balanced out and shares the content evenly between the 3 columns, thanks in advance for your help…

2

If you are coding this by hand, there are various ways to do this. One way would be to have an unordered list (<ul>) with each list item (<li>) floated left (or set to display: inline-block or inline) and set to width: 33%. But you’d have to type the content in manually in the order you want it. Another option would be to use a table … though that’s not so good, since this isn’t tabular data. Or you could also set the <ul> to display: table and the <li>s to display: table-cell, width: 33%.

3

Thanks for your reply… i don’t want to use a table and this content will change on a daily basis which will be pulled from the database :frowning:

4

What’s the logic in the order you have presented? E.g. Why is I at the top of column 2?

5

This seems to do it:

html -

<div id="c1">abcdefghi</div>
<div id="c2">jklmnopqr</div>
<div id="c3">stuvwxyz</div>

css-

#c1, #c2, #c3 { width:10px; word-wrap: break-word; float:left;}
#c2, #c3 { padding-left:10px; }

example-
http://www.netu.co.il/uploads/c_example.html

6

Hi,

It’s not possible in css2+ to do this automatically but css3 has the multi column layout which will distribute equally between columns but is only supported in a few browsers at present.

7

Ok, thanks…

8