CODEWITHSUNDEEP
htmlcss
user3646836
user3646836

Reputation: 13

issues with 3 column css displaying incorrectly

Got a bit of an issue, I have a 3 column displaying text and check boxes, however it is centering correctly in the page but the boxes and text are centered to

looky here

I want the content centered in the page but want the text and check boxes aligned correctly vertically. Please help, and thank you!

html

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

css

  div.column {
    width: 30%;                     /* approximately 1/6 */
    display: inline-block;
    zoom: 1;                        /* ie-7 hack for inline block to work */
    *display: inline;               /* ie-7 hack for inline-block to work */
  /*  border: 1px solid red; */         /* temporary - to clearly show the box */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* to prevent padding issues if you add padding */
    margin: 0;                      /* to ensure the right width */
    vertical-align: top;            /* to line them up evenly across the top */
}

Upvotes: 0

Views: 45

Answers (3)

Muhammad Umer
Muhammad Umer

Reputation: 18097

Try this: http://jsfiddle.net/techsin/6cs47/

It's very simple all you have to do is get rid of all old styles and use this new column feature of html5. 

.con {
    border:1px solid;
    -webkit-column-count:3;
}

Upvotes: 1

lukeocom
lukeocom

Reputation: 3243

I have created a codepen for you...

a possible solution is wrapping each input within a div, which gives you greater control over your layout. By setting a fixed width for the divs will ensure that each one is displayed the same, with longer labels wrapping to a second line rather than pushing your alignment out.

<div class="center">
    <div class="column">
        <div class="col"><input /><label/></div>
    </div>
</div>

hope this helps.

Upvotes: 0

Viscocent
Viscocent

Reputation: 2064

try this

{foreach key=num item=listtld from=$tldslist}
  <div class="column">
      <input type="checkbox" name="tlds[]" value="{$listtld}"{if in_array($listtld,$tlds)} checked{/if} style="float:left !important"/>
      {$listtld}
      {if $num % 5 == 0}
      {/if}
  </div>
{/foreach}



div.column {
    width: 30%;                     /* approximately 1/6 */
    display: inline-block;
    zoom: 1;                        /* ie-7 hack for inline block to work */
    *display: inline;               /* ie-7 hack for inline-block to work */
  /*  border: 1px solid red; */         /* temporary - to clearly show the box */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* to prevent padding issues if you add padding */
    margin: 0;                      /* to ensure the right width */
    vertical-align: top;            /* to line them up evenly across the top */
    text-align:center;
}

Upvotes: 0

Related Questions