Even Column Height - Is This Even Possible

**oo7ml** · 06-09-2012 05:18 AM

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...

**coothead** · 06-09-2012 06:47 AM

Hi there oo7ml,

Firefox and Safari can do it with the CSS3 "column property".

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

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

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title></title>

<style>
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;
}
</style>

</head>
<body>

<div id="box">
 A<br>B<br>C<br>D<br>E<br>
 F<br>G<br>H<br>I<br>J<br>
 K<br>L<br>M<br>N<br>O<br>
 P<br>Q<br>R<br>S<br>T<br>
 U<br>V<br>W<br>X<br>Y<br>Z
</div>

</body>
</html>

Further reading:-

coothead

**oo7ml** · 06-09-2012 07:19 AM

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

**chryaner** · 06-09-2012 07:42 AM

you can do it like this

html -

Code:

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

css-

Code:

#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

**oo7ml** · 06-09-2012 07:49 AM

Wow, thanks... is this supported by all the major browsers

**chryaner** · 06-09-2012 07:54 AM

its a simple css it have to

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

you welcome

**oo7ml** · 06-09-2012 07:55 AM

Thanks for this, much appreciated...

**oo7ml** · 06-09-2012 08:01 AM

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>

**chryaner** · 06-09-2012 08:35 AM

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>

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>

example: link

**coothead** · 06-09-2012 02:41 PM

Hi there oo7ml,

here is the javascript example that you requested...

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>variable colums list</title>

<style>
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 {

/*  this value multiplied by the number of columns must  */
/*  be equal to or less than the width of #itemList      */

    width:300px;  /* this is the max-width for 3 columns */

/*********************************************************/

    line-height:34px;
 }
</style>

<script>

function init(){

/********* this value is editable ********/

   cols=3;

/*****************************************/

   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<cols+1;k++) {
for(c=n*k;c<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);
</script>

</head>
<body>

<div id="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>
 <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>Y</li>
 <li>Z</li>
</ul>
</div>

</body>
</html>

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

coothead

**coothead** · 06-10-2012 05:11 AM

Hi there oo7ml,

if the javascript example meets your requirements, check out
the attachment which has simplified the setup somewhat.

coothead

**oo7ml** · 06-11-2012 03:17 AM

Wow cool, thanks for this Coothead... much appreciated

**coothead** · 06-11-2012 03:32 AM

No problem, you're very welcome.

coothead

Thread: Even Column Height - Is This Even Possible

Thread Tools

Display

Even Column Height - Is This Even Possible

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions