dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Two Column UL (Variable height)

  1. #1
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,227

    Two Column UL (Variable height)

    Hey there, typically, I handle a two column list like this.
    Code:
    ul.two-column li {float: left; width: 50%;}
    The problem is that this only works for one line LI's. If the content expands to two lines, it breaks. Any recommendations on the simplest way to achieve this without a bunch of extra HTML?

    Here's the example:
    https://codepen.io/anon/pen/GmZmKr
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,829

    Lightbulb

    Not a perfect solution, but possible consideration ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> HTML5 page </title>
    <style>
     .container { display: table; }
     .row { display: table-row; display: inline-block; min-height: 200px; }
     .cell {
      display: table-cell;
      min-width: 200px; 
      padding: 1em;
      vertical-align: top;
     }
    </style>
    </head>
    <body>
    <!-- From: http://www.webdeveloper.com/forum/showthread.php?363159-Two-Column-UL-(Variable-height) -->
    
     <div class="container">
    
      <div class="row">
       <ul class="cell">
        <li>Line 1</li>
        <li>Line 2</li>
        <li>Line 3</li>
        <li>Line 4
         <ul>
          <li>Sub line 4-1</li>
          <li>Sub line 4-2</li>
         </ul>
        </li>
       </ul>
      </div>
    
      <div class="row">
       <ul class="cell">
        <li>Line 5</li>
        <li>Line 6</li>
        <li>Line 7</li>
        <li>Line 8</li>
        <li>Line 9</li>
        <li>Line 10</li>
       </ul>
      </div>
    
      <div class="row">
       <ul class="cell">
        <li>Line 11</li>
        <li>Line 12
         <ul>
          <li>Sub line 12-1</li>
          <li>Sub line 12-2</li>
         </ul>
        </li>
        <li>Line 13</li>
        <li>Line 14</li>
       </ul>
      </div>
    
     </div>
    </body>
    </html>
    Added an extra column for testing purposes only

  3. #3
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,829

    Lightbulb

    Found an easier CSS3 solution that applies to your original list.
    Requires only the insertion of an extra <div> tag.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> 2-Column List </title>
    <style>
    /* Modified from: https://www.w3schools.com/css/css3_multiple_columns.asp */
     .two-column {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
     }
    /*  ul { width: 50%; } /* */
    </style>
    
    </head>
    <body>
    <ul>
     <div class="two-column">
      <li>Line 1</li>
      <li>Line 2</li>
      <li>Line 3</li>
      <li>Line 4
        <ul>
          <li>Sub line 4-1</li>
          <li>Sub line 4-2</li>
        </ul>
      </li>
      <li>Line 5</li>
      <li>Line 6</li>
      <li>Line 7</li>
      <li>Line 8</li>
      <li>Line 9</li>
      <li>Line 10</li>
      <li>Line 11</li>
      <li>Line 12</li>
      <li>Line 13</li>
      <li>Line 14
        <ul>
          <li>Sub line 14-1</li>
          <li>Sub line 14-2</li>
        </ul>
      </li>
      <li>Line 15</li>
     </div>
    </ul>
    
    </body>
    </html>

  4. #4
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,829

    Smile

    Just playing around now, but some other food for thought ...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Column Lists </title>
    <style>
    /* Modified from: https://www.w3schools.com/css/css3_multiple_columns.asp */
     .columnList2 {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
     }
     .columnList3 {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
     }
     .columnList4 {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
     }
    /* ul { width: 50%; } /* */
    </style>
    
    </head>
    <body>
    
    <button onclick="colSet('')">1 col</button>
    <button onclick="colSet('columnList2')">2 cols</button>
    <button onclick="colSet('columnList3')">3 cols</button>
    <button onclick="colSet('columnList4')">4 cols</button>
    
    <ul>
     <div id="LIcols"> <!-- class="columnList2" -->
      <li>Line 1</li>
      <li>Line 2</li>
      <li>Line 3</li>
      <li>Line 4
        <ul>
          <li>Sub line 4-1</li>
          <li>Sub line 4-2</li>
        </ul>
      </li>
      <li>Line 5</li>
      <li>Line 6</li>
      <li>Line 7</li>
      <li>Line 8</li>
      <li>Line 9</li>
        <ul>
          <li>Sub line 9-1</li>
          <li>Sub line 9-2</li>
        </ul>
      <li>Line 10</li>
      <li>Line 11</li>
      <li>Line 12</li>
      <li>Line 13</li>
      <li>Line 14
        <ul>
          <li>Sub line 14-1</li>
          <li>Sub line 14-2</li>
        </ul>
      </li>
      <li>Line 15</li>
      <li>Line 16</li>
      <li>Line 17</li>
      <li>Line 18</li>
      <li>Line 19</li>
     </div>
    </ul>
    
    <script>
    function colSet(info) {
      document.getElementById('LIcols').classList.remove('columnList2','columnList3','columnList4');
      document.getElementById('LIcols').classList.toggle(info);
    }
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,227
    This is good stuff. Apparently I'm not as up to date with my CSS knowledge as I thought. I haven't dealt with column-count yet. This is exactly what I was looking to do. Browser support is probably good enough with this too! I owe you a brewskie.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  6. #6
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,829
    You're most welcome.
    Happy to help.
    Good Luck!

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,816
    Hi there cbVision,

    you should note that the "ul element" may only have the "li element" as a child.

    If you wish to maintain two columns, try this..

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    #two-column li {
        width: 50%; 
        float: left;
     }
    
    #two-column li:nth-child(4) ul {
        margin-left: -100%;
        padding: 0;
     }
    
    @media screen and ( max-width: 25em ) {
    #two-column li {
        width: auto; 
        float: none;
      }
    
    #two-column li:nth-child(4) ul {
        margin-left: -2.5em;
        padding-left: 2.5em;
      }
     }
    </style>
    
    </head>
    <body> 
    
    <ul id="two-column">
      <li>Line 1</li>
      <li>Line 2</li>
      <li>Line 3</li>
      <li>Line 4
        <ul>
          <li>Sub line 4-1</li>
          <li>Sub line 4-2</li>
        </ul>
      </li>
      <li>Line 5</li>
      <li>Line 6</li>
      <li>Line 7</li>
      <li>Line 8</li>
      <li>Line 9</li>
    </ul>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  8. #8
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,829

    Thumbs up

    Quote Originally Posted by coothead View Post
    Hi there cbVision,

    you should note that the "ul element" may only have the "li element" as a child.

    If you wish to maintain two columns, try this..


    coothead
    Thanks for the information. I had not read that.
    I moved the <div> tags and it appears to have no effect on the output.
    Good to know.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Column Lists </title>
    <style>
    /* Modified from: https://www.w3schools.com/css/css3_multiple_columns.asp */
     .columnList2 {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
     }
     .columnList3 {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
     }
     .columnList4 {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
     }
    /* ul { width: 50%; } /* */
    </style>
    
    </head>
    <body>
    
    <button onclick="colSet('')">1 col</button>
    <button onclick="colSet('columnList2')">2 cols</button>
    <button onclick="colSet('columnList3')">3 cols</button>
    <button onclick="colSet('columnList4')">4 cols</button>
    
     <div id="LIcols"> <!-- class="columnList2" -->
    <ul>
      <li>Line 1</li>
      <li>Line 2</li>
      <li>Line 3</li>
      <li>Line 4
        <ul>
          <li>Sub line 4-1</li>
          <li>Sub line 4-2</li>
        </ul>
      </li>
      <li>Line 5</li>
      <li>Line 6</li>
      <li>Line 7</li>
      <li>Line 8</li>
      <li>Line 9</li>
        <ul>
          <li>Sub line 9-1</li>
          <li>Sub line 9-2</li>
        </ul>
      <li>Line 10</li>
      <li>Line 11</li>
      <li>Line 12</li>
      <li>Line 13</li>
      <li>Line 14
        <ul>
          <li>Sub line 14-1</li>
          <li>Sub line 14-2</li>
        </ul>
      </li>
      <li>Line 15</li>
      <li>Line 16</li>
      <li>Line 17</li>
      <li>Line 18</li>
      <li>Line 19</li>
    </ul>
     </div>
    
    <script>
    function colSet(info) {
      document.getElementById('LIcols').classList.remove('columnList2','columnList3','columnList4');
      document.getElementById('LIcols').classList.toggle(info);
    }
    </script>
    
    </body>
    </html>

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