CSS 3 column setup issues

Question

Having an issue having some domain names lining up nicely in a 3 column setup, I have been trying this for a bit now with no success, I'm a newbie at this. The code is as followed

TPL file

<div>
                <p class="center">{foreach key=num item=listtld from=$tldslist}
    <input type="checkbox" name="tlds[]" value="{$listtld}"{if in_array($listtld,$tlds)} checked{/if}>
      {$listtld}
    {if $num % 5 == 0}
    {/if}{/foreach}</p>
            </div>              

and for the CSS

.center {
text-align: center;

and

 p {

}

What am I missing here? Or how would I achieve this and have it look good on a mobile device other than all bunched up together like a snowball? Thanks

(And I'm sure you all know this already but the is in a lot of things so I guess I would need to create a different css thing. Sorry, please excuse my ignorance. I'm new to this)

Answer 1

Not sure if this is the result you desire but you could try using the answer in this stackoverflow question, just use a counter and assign the desired class to each column based on its modal.

<div>
     <p class="center">
        {foreach key=num item=listtld from=$tldslist}
          <div class="{if ($num+1) % 3 == 1}column-left{elseif ($num+1) % 3 == 2}column-center{elseif ($num+1) % 3 == 0}column-right{/if}">
              <input type="checkbox" name="tlds[]" value="{$listtld}"{if in_array($listtld,$tlds)} checked{/if}>
              {$listtld}
              {if $num % 5 == 0}
              {/if}
          </div>
       {/foreach}
    </p>
</div>

CSS:

.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

EDIT:

For a 6 column grid try using two containers to separate the 3 column grid, you can do so by using a mod of 6 for these containers.

Like this:

<div>
     <p class="center">
        {foreach key=num item=listtld from=$tldslist}
          {if ($num+1) % 6 == 1}
              <div class="container-left">
          {else if ($num+1) % 6 == 4}
              <div class="container-right">
          {/if}
            <div class="{if ($num+1) % 3 == 1}column-left{elseif ($num+1) % 3 == 2}column-center{elseif ($num+1) % 3 == 0}column-right{/if}">
              <input type="checkbox" name="tlds[]" value="{$listtld}"{if in_array($listtld,$tlds)} checked{/if}>
              {$listtld}
              {if $num % 5 == 0}
              {/if}
           </div>
         {if ($num+1) % 3 == 0}</div>{/if}
       {/foreach}
    </p>
</div>

CSS:

.column-left{ float: left; width: 30%; }
.column-right{ float: right; width: 30%; }
.column-center{ display: inline-block; width: 30%;}
.container-left{ float: left; width: 50%;  }
.container-right{ float: right; width: 50%;  }