0

I'm creating an HTML layout for a person's hobbies. The person may pick anywhere between 1-20 hobbies they like. I want to display them in rows with 3 columns. Is there a way to do this with divs so that I don't have to compute when to insert a new row? For example if I use a table and the user picks 7 hobbies it looks like:

<tr><td>hobby 1</td><td>hobby 2</td><td>hobby3</td</tr>
<tr><td>hobby 4</td><td>hobby 5</td><td>hobby6</td</tr>
<tr><td>hobby 7</td><td></td><td></td</tr>

and I would have to know when to insert a new row (on the server side when getting the data). That's a bit of a pain - have I printed another 3 columns? ok, end the row and start a new one.

I'd like something like:

<div container>
<div>hobby 1</div>
<div>hobby 2</div>
<div>hobby 3</div>
<div>hobby 4</div>
<div>hobby 5</div>
<div>hobby 6</div>
<div>hobby 7</div>
</div>

where the output looks like:

hobby1   hobby2   hobby3
hobby4   hobby5   hobby6
hobby7

The container will be a fixed size (600px), as well as each cell (200 px)

1
  • have you tried just floating the divs left yet? you'll want to give the divs a consistent width as well so they line up in columns
    – kinakuta
    Oct 3, 2013 at 21:46

3 Answers 3

1

Given a container .table of width: 600px, just set each child div to width: 50% and float: left to achieve your desired effect.

HTML

<div class="table">
    <div>hobby 1</div>
    <div>hobby 2</div>
    <div>hobby 3</div>
    <div>hobby 4</div>
    <div>hobby 5</div>
    <div>hobby 6</div>
    <div>hobby 7</div>
</div>

CSS

.table {
    overflow: hidden; /** Contain floated elements **/
    width: 600px;
}

.table div {
    float: left;
    width: 33%; /** Or, a fixed pixel width of 200px; **/
}

Working example [Updated 10/4]

NOTE: Updated to display 3 columns, instead of 2. Updated Fiddle example.

3
  • Floating the divs left is the most straightforward solution, but the OP is asking for 3 columns, not 2.
    – kinakuta
    Oct 4, 2013 at 3:55
  • This works with a change on .table div to width: 200px; for 3 columns instead of width: 50% for 2 columns
    – spock99
    Oct 4, 2013 at 12:47
  • @kinakuta Ha, good point. I have updated the example to reflect that.
    – kunalbhat
    Oct 4, 2013 at 15:01
1

I'd suggest using CSS columns:

<!-- note that I've used 'container' as an id, rather than just free floating
     the string within the tag (which would make it an invalid attribute) -->
<div id="container">
    <div>hobby 1</div>
    <div>hobby 2</div>
    <div>hobby 3</div>
    <div>hobby 4</div>
    <div>hobby 5</div>
    <div>hobby 6</div>
    <div>hobby 7</div>
</div>

With the CSS:

#container {
    -moz-column-count: 3;
    -ms-column-count: 3;
    -o-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

JS Fiddle demo.

Obviously this solution requires the browser to implement the CSS multi-column layout module, it is possible to use CSS to test for browser-support for a given CSS property-value pair (though this has its problems, and is even less-well supported than CSS columns, however if a browser supports the @supports () syntax then there's a pretty good chance that it also supports the columns:

/* defaults, to style if columns are not supported: */
#container {
}
#container div {
    display: inline-block;
    height: 1.5em;
    line-height: 1.5em;
    text-indent: 0.5em;
    float: left;
    width: 30%;
    border: 1px solid #000;
    margin: 0 0.5em 0.2em 0.5em;
}
/* testing for support for the given property-name and the property-value: */
@supports (-moz-column-count: 3) or (-ms-column-count: 3) or (-o-column-count: 3) or (-webkit-clumn-count: 3) or (column-count: 3) {
    /* if the browser supports the property-name and property-value, the following styles are used, if the browser doesn't understand the syntax the rules are discarded */
    #container {
        -moz-column-count: 3;
        -ms-column-count: 3;
        -o-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
    #container div {
        /* unset the 'if not supported' styling */
        display: block;
        float: none;
        /* aesthetics, just because; adjust to taste */
        width: 90%;
        margin: 0 auto 0.5em auto;
    }
}

JS Fiddle demo.

Now, above I said that @supports has 'its problems'; to quote Eric Meyer:

A CSS processor is considered to support a declaration (consisting of a property and value) if it accepts that declaration (rather than discarding it as a parse error). If a processor does not implement, with a usable level of support, the value given, then it must not accept the declaration or claim support for it.

So in that first sentence, what we’re told is that “support” means “accepts [a] declaration” and doesn’t drop it on the floor as something it doesn’t recognize. In other words, if a browser parses a property:value pair, then that qualifies as “support” for said pair. Note that this sentence says nothing about what happens after parsing. According to this, a browser could have a completely botched, partial, and generally unusable implementation of the property:value pair, but the act of recognizing means that there’s “support”.

Reference: 'Unsupportable Promises', by Eric Meyer, accessed: 2013-10-03, 23:43 (British Summer Time)

Despite the above, it seems to work (in this case, tested in Chromium 28 on Ubuntu 12.10), but is, apparently, potentially-fragile.

References:

0

How about something like this:

#hobby{
         display:inline-block;
         width: 197px;
         max-width:197px;
         height:200px;
         max-height:200px;
         margin:0px;
         margin-top:2px;
         overflow:hidden; 
}

http://jsfiddle.net/3m2NK/4/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.