Even Column Height – Is This Even Possible

@oo7mlJun 09.2012

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…

to post a comment

CSS

12 Comments(s) _↴

@cootheadJun 09.2012 — #Hi there oo7ml,

Firefox and Safari can do it with the CSS3 "[i]column property[/i]". ?

So, unfortunately, it will not really be of any immediate use to you.

Nevertheless, here is an example for you to view...

[color=navy]&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 
 &lt;meta charset="utf-8"&gt;
 
 &lt;title&gt;&lt;/title&gt;
 
 &lt;style&gt;
 body {
 background-color:#f0f0f0;
 }
 #box {
 width:170px;
 border:1px solid #999;
 margin:auto;
 -moz-columns:3 40px;
 -moz-column-rule:1px solid #999;
 -webkit-columns:3 40px;
 -webkit-column-rule:1px solid #999;
 text-align:center;
 background-color:#fff;
 box-shadow: 5px 5px 5px #333;
 font-weight:bold;
 color:#333;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="box"&gt;
 A&lt;br&gt;B&lt;br&gt;C&lt;br&gt;D&lt;br&gt;E&lt;br&gt;
 F&lt;br&gt;G&lt;br&gt;H&lt;br&gt;I&lt;br&gt;J&lt;br&gt;
 K&lt;br&gt;L&lt;br&gt;M&lt;br&gt;N&lt;br&gt;O&lt;br&gt;
 P&lt;br&gt;Q&lt;br&gt;R&lt;br&gt;S&lt;br&gt;T&lt;br&gt;
 U&lt;br&gt;V&lt;br&gt;W&lt;br&gt;X&lt;br&gt;Y&lt;br&gt;Z
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;
 [/color]

[b]Further reading[/b]:-
[list=1]

[*]https://developer.mozilla.org/en/CSS3_Columns

[*]http://caniuse.com/#search=column

[/list]
[i]coothead[/i]

@oo7mlauthorJun 09.2012 — #Ok cool, thanks for your help... i need something that is cross browser compatible... i wonder if there is a JS workaround for this

@chryanerJun 09.2012 — #you can do it like this

[B]html [/B]-

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

[B]css[/B]-

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

[B][U]example[/U][/B]-

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

@oo7mlauthorJun 09.2012 — #Wow, thanks... is this supported by all the major browsers

@chryanerJun 09.2012 — #its a simple css it have to ?

checked ie(7,8,9), ff, chrome - working well

you welcome

@oo7mlauthorJun 09.2012 — #Thanks for this, much appreciated...

@oo7mlauthorJun 09.2012 — #Sorry, this doesn't work because all of the letters are pre-typed into even lists...

I need something that will spread one list out evenly... something like this:

<style>

.itemList ul{

width:900px;

float:left;

list-style-type:none;

margin:0;

padding:0;

}

.itemList ul li{

width:290px;

padding:5px;

float:left;

}

</style>

<DIV class="itemList">

<ul>

<li>A</li>

<li>B</li>

<li>C</li>

<li>D</li>

<li>E</li>

<li>F</li>

<li>G</li>

<li>H</li>

<li>I</li>

<li>J</li>

</ul>

</DIV>

@chryanerJun 09.2012 — #if thats the case, youll need something like that:

css:

[CODE]<style type="text/css">
 ul li { float: left; list-style-type: none; width: 14px; }
 ul { height: 145px; width: 42px; margin: 0px; padding: 0px; }
 </style>
 [/CODE]

html:

[CODE]<DIV id="c1">
 <ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>D</li>
 <li>E</li>
 <li>F</li>
 <li>G</li>
 <li>H</li>
 <li>I</li>
 <li>J</li>
 <li>K</li>
 <li>L</li>
 <li>M</li>
 <li>N</li>
 <li>O</li>
 <li>P</li>
 <li>Q</li>
 <li>R</li>
 <li>S</li>
 <li>T</li>
 <li>U</li>
 <li>V</li>
 <li>W</li>
 <li>X</li>
 <li>U</li>
 </ul>
 </DIV>[/CODE]

example: link

@cootheadJun 09.2012 — #Hi there oo7ml,

here is the javascript example that you requested...

[color=navy]&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 
 &lt;meta charset="utf-8"&gt;
 
 &lt;title&gt;variable colums list&lt;/title&gt;
 
 &lt;style&gt;
 body {
 background-color:#f0f0f0;
 }
 #itemList {
 width:900px;
 padding:10px;
 margin:auto;
 border:1px solid #999; 
 background-color:#fff;
 box-shadow: 10px 10px 10px #666;
 }
 #itemList ul {
 margin:0;
 padding:0;
 list-style-type:none;
 }
 #itemList li {
 [color=red]
 /*  this value multiplied by the number of columns must  */
 /*  be equal to or less than the width of #itemList      */
 
 <i>    </i>width:300px;  /* this is the max-width for 3 columns */
 
 /*********************************************************/
 [/color]
 line-height:34px;
 }
 &lt;/style&gt;
 
 &lt;script&gt;
 
 function init(){
 [color=red]
 /********* this value is editable ********/
 
 cols=3;
 
 /*****************************************/
 [/color]
 obj=document.getElementById('itemList')
 l=obj.getElementsByTagName('li');
 
 lw=l[0].offsetWidth;
 lh=l[0].offsetHeight;
 
 if(l.length%cols!==0) {
 n=Math.floor(l.length/cols+1);
 }
 else {
 n=l.length/cols;
 }
 
 dh=lh*n;
 
 obj.style.height=dh+'px';
 
 for(k=1;k&lt;cols+1;k++) {
 for(c=n*k;c&lt;n*(k+1);c++) { 
 if(l[c]!==undefined){
 l[c].style.marginLeft=lw*k+'px';
 l[n*k].style.marginTop=-dh+'px';
 }
 }
 }
 }
 window.addEventListener?
 window.addEventListener('load',init,false):
 window.attachEvent('onload',init);
 &lt;/script&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="itemList"&gt;
 &lt;ul&gt;
 &lt;li&gt;A&lt;/li&gt;
 &lt;li&gt;B&lt;/li&gt;
 &lt;li&gt;C&lt;/li&gt;
 &lt;li&gt;D&lt;/li&gt;
 &lt;li&gt;E&lt;/li&gt;
 &lt;li&gt;F&lt;/li&gt;
 &lt;li&gt;G&lt;/li&gt;
 &lt;li&gt;H&lt;/li&gt;
 &lt;li&gt;I&lt;/li&gt;
 &lt;li&gt;J&lt;/li&gt;
 &lt;li&gt;K&lt;/li&gt;
 &lt;li&gt;L&lt;/li&gt;
 &lt;li&gt;M&lt;/li&gt;
 &lt;li&gt;N&lt;/li&gt;
 &lt;li&gt;O&lt;/li&gt;
 &lt;li&gt;P&lt;/li&gt;
 &lt;li&gt;Q&lt;/li&gt;
 &lt;li&gt;R&lt;/li&gt;
 &lt;li&gt;S&lt;/li&gt;
 &lt;li&gt;T&lt;/li&gt;
 &lt;li&gt;U&lt;/li&gt;
 &lt;li&gt;V&lt;/li&gt;
 &lt;li&gt;W&lt;/li&gt;
 &lt;li&gt;X&lt;/li&gt;
 &lt;li&gt;Y&lt;/li&gt;
 &lt;li&gt;Z&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;
 [/color]

You will see that the number of columns is also variable. ?

[i]coothead[/i]

@cootheadJun 10.2012 — #Hi there oo7ml,

if the javascript example meets your requirements, check out

the attachment which has simplified the setup somewhat. ?

[i]coothead[/i]

@oo7mlauthorJun 11.2012 — #Wow cool, thanks for this Coothead... much appreciated ?

@cootheadJun 11.2012 — #[indent]No problem, you're very welcome. ?[/indent]

[i]coothead[/i]

Also in #CSS _↴

Centering divisions with CSS PNG Transparency. Another way?trouble with a hr and backgrounds in FF

Success!

Help @oo7ml spread the word by sharing this article on Twitter...

Tweet This

Even Column Height – Is This Even Possible

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Even Column Height – Is This Even Possible

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴