www.webdeveloper.com
Results 1 to 3 of 3

Thread: Building columns

  1. #1
    Join Date
    Oct 2014
    Posts
    1

    Building columns

    Hello,

    I am working on a test site and I am having trouble building columns. The code is listed below along with a result. As you can see for some reason the first column is not aligned with the other two. I have never used this technique before so I am not sure what I am doing wrong.

    HTML:

    <div id="col">
    <h3>Amenities</h3>
    <p>Lorem ipsum dolor sit amet, in quot persequeris nam. Quis autem cetero per ad, mundi choro pro eu. Cu alterum oportere sapientem est, perpetua delicatissimi eos at, mea hinc dolorem ea. Ius an modo moderatius. Choro equidem philosophia ex eam, nam an iuvaret invenire</p>

    <h3>Adventures</h3>
    <p>Lorem ipsum dolor sit amet, in quot persequeris nam. Quis autem cetero per ad, mundi choro pro eu. Cu alterum oportere sapientem est, perpetua delicatissimi eos at, mea hinc dolorem ea. Ius an modo moderatius. Choro equidem philosophia ex eam, nam an iuvaret invenire</p>

    <h3>Reservations</h3>
    <p>Lorem ipsum dolor sit amet, in quot persequeris nam. Quis autem cetero per ad, mundi choro pro eu. Cu alterum oportere sapientem est, perpetua delicatissimi eos at, mea hinc dolorem ea. Ius an modo moderatius. Choro equidem philosophia ex eam, nam an iuvaret invenire</p>
    </div>

    CSS:

    #col {
    -moz-column-count: 3;
    -moz-column-gap: normal;
    -moz-column-rule: 1px solid black;
    -webkit-column-count: 3;
    -webkit-column-gap: normal;
    -webkit-column-rule: 1px solid black;
    padding-top: 25px;
    }

    #col h3 {
    text-align: center;
    padding-top: 15px;
    }

    #col p {
    text-align: center;
    }

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,016
    My guess is going to be that it's just a weird quirk or behavior of using those column-* properties. And judging by the fact that they each have browser specific versions I can assume these aren't part of any official CSS spec.

    Rather than sit here and troubleshoot why that method behaves weirdly I think it's a much better idea to just suggest that you use an actual <table> or CSS tables. Both were designed to display elements just like you are trying to do, but they have much better browser support and you won't find any weird behavior (for the most part).

  3. #3
    Quote Originally Posted by Sup3rkirby View Post
    Rather than sit here and troubleshoot why that method behaves weirdly I think it's a much better idea to just suggest that you use an actual <table> or CSS tables. Both were designed to display elements just like you are trying to do, but they have much better browser support and you won't find any weird behavior (for the most part).
    Whereas rather than abuse tables for non-tabular data, I'd just float some DIV.

    Really the 'break point' of where CSS columns occurs is entirely up to the browser, change out those texts for texts of different lengths and you'll see exactly what I mean. Because it's arbitrary based on available widths, the -column- CSS is NOT meant for actually building columnar layouts (that's what flex-box is for) but for making auto-columns of large runs of paragraphs of text. If you have headings, and you want each column to start at a new heading, you're going to need a block level container around them and use floats, flex-box or as Sup3rkirby suggested, display:table-cell.

    Basically, what you are trying to do is NOT what -column- css is for.

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