www.webdeveloper.com
Results 1 to 13 of 13

Thread: Even Column Height - Is This Even Possible

  1. #1
    Join Date
    Jul 2006
    Posts
    663

    Even Column Height - Is This Even Possible

    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. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    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:-
    1. https://developer.mozilla.org/en/CSS3_Columns
    2. http://caniuse.com/#search=column

    coothead

  3. #3
    Join Date
    Jul 2006
    Posts
    663
    Ok cool, thanks for your help... i need something that is cross browser compatible... i wonder if there is a JS workaround for this

  4. #4
    Join Date
    Mar 2012
    Posts
    48
    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

  5. #5
    Join Date
    Jul 2006
    Posts
    663
    Wow, thanks... is this supported by all the major browsers

  6. #6
    Join Date
    Mar 2012
    Posts
    48
    its a simple css it have to
    checked ie(7,8,9), ff, chrome - working well

    you welcome

  7. #7
    Join Date
    Jul 2006
    Posts
    663
    Thanks for this, much appreciated...

  8. #8
    Join Date
    Jul 2006
    Posts
    663
    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>

  9. #9
    Join Date
    Mar 2012
    Posts
    48
    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

  10. #10
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    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

  11. #11
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there oo7ml,

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

    coothead
    Attached Files Attached Files

  12. #12
    Join Date
    Jul 2006
    Posts
    663
    Wow cool, thanks for this Coothead... much appreciated

  13. #13
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    No problem, you're very welcome.
    coothead

Thread Information

Users Browsing this Thread

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

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