Side by Side Lists?

mikey_w · March 21, 2015, 7:45pm

I am building an Interests page and have come up with 11 Categories, and under each Category there are between 1 and 5 choices.

To display all of this on one page, I was thinking of having two columns with the first one having the first 5 Categories/Lists, and the second column having the remaining 6 Categories/Lists.

My clients website uses HTML4 and is not responsive, so i don’t need anything overly fancy, so long as it looks nice on your standard PC/Browser.

I have heard that HTML Tables are bad, so how should I approach this?

The only thing I can think of is creating two DIVs and somehow making then appear side-by-sdie on one row.

Oh, I should also mention that the # of Categories and the # of List Items could change at any time since this is all coming from the back-end database, and therefore is dynamic!

Thanks.

mikey_w · March 21, 2015, 7:49pm

Here is a quick mockup of what I am envisioning…

Sports                    Indoors
----------                --------    
__ Football                __ Stamp Collecting
__ Basketball                __ Coins
__ Baseball                __ Knitting
__ Hockey                __ Cooking


Outdoors                Community
---------                ----------
__ Hunting                __ Volunteering
__ Fishing                __ Church
__ Camping                __ Mentoring
__ Hiking                __ Community Group

(Of course the second column is supposed to be better aligned!)

OzRamos · March 21, 2015, 7:57pm

Something like this? http://jsfiddle.net/s7vfhpcn/

mikey_w · March 21, 2015, 8:13pm

Thanks for the sample code. It looks similar to mine, but my only concern is that you are taking a grid approach.

I guess I was thinking more or two columns where you could have multiple “cells” (e.g. Categories) that would just keep expanding downward as you added more.

Actually, what would be the coolest is if as you added new “cells” they pushed the next “cells” down in the first column, and when things got to the bottom of the parent container, then things wrapped around to the top of the second column like a newspaper works. (But that is probably asking too much for the web!)

Does that make sense?

Thoughts?

OzRamos · March 21, 2015, 8:29pm

That’s actually even easier, just take out that last row and put the lists immediately underneath each other: http://jsfiddle.net/s7vfhpcn/1/

The columns just divide the page into two, well, columns. They can extend downward as far as you’d like. The rows are there to ensure that the next set of content starts flush with whatever is tallest.

Making them wrap like that is significantly trickier (I don’t think it’s possible with just HTML/CSS)

mikey_w · March 21, 2015, 8:38pm

Maybe I have to tackle that with PHP?

If I have 11 Categories, maybe I could have my PHP figure the (near) half-way point, and then display the first half (e.g. 5) in Column-A, and the remaining in Column-B?

ralphm · March 21, 2015, 9:18pm

Or just use CSS? Easy these days:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.column {
-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */
}
</style>
</head>
<body>

<div class="column">
        <h2>Sports</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
        </ul>
        <h2>Sports</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
        </ul>        
        <h2>Sports</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
        </ul>   
    </div>
    <div class="column">
        <h2>Indoors</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
        </ul>

        <h2>Indoors</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
        </ul>        
    </div>

</body>
</html>

mikey_w · March 21, 2015, 9:26pm

@ralphm,

I don’t get what you are showing me, other than slightly simpler CSS.

How would your solution know when and where to wrap my Categories?

ralphm · March 21, 2015, 9:37pm

It just divides one column into two equal columns, so doesn’t give fine-grained control of where the columns break.

mikey_w · March 22, 2015, 9:06pm

Thanks to OzRamos and others, my Interests page is looking pretty cool.

One thing I did to spice things up was to add a background color to the Category H2.

The problem, however, is that the H2 in Column-1 runs into the H2 in Column-2.

So I simply added a 20px right margin to the Column style, but since it uses 50%, that broke things.

How can I add a margin, and know how to adjust the width percentage so it will always work??

(I have had this issue in the past and wish there was a way to make Padding and Margins a percentage, so the math was easier…)

Here is what I have now…

#changeInterests div.column{
    width: 50%;
    float: left;
    margin: 0 20px 0 0;
}

Mittineague · March 22, 2015, 9:09pm

It would be immense help if you post a link to the page.

mikey_w · March 22, 2015, 9:12pm

Client’s website. Can’t do that for non-disclosure, and the code is too complex to post everything here.

But that shouldn’t matter, as I am basically just playing with OzRamos’ code above in Post #5.

Mittineague · March 22, 2015, 9:19pm

Ah, OK. I got confused when you said “my” instead of “the”

mikey_w · March 22, 2015, 9:28pm

I do that interchangeable since it is my “baby”, although I don’t own it!

ronpat · March 22, 2015, 9:47pm

The columns have percentage widths that total 100%. You will need to apply the margin to the contents of the .column containers. (If I understand the question.)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>containers + margins</title>
<!--
http://www.sitepoint.com/community/t/side-by-side-lists/116219/10
Mar 22, 5:06 PM
mikey_w
-->
    <style type="text/css">

.row {clear:both}

.column {
    width: 50%;
    float: left;
    outline:1px solid blue;    /* TEST Outline.  To Be Deleted. */
}
h2,ul {
    margin-right:5%;  /* your choice of unit of measure */
    outline:1px solid magenta;    /* TEST Outline.  To Be Deleted. */
}

    </style>
</head>
<body>

<div class="row">
    <div class="column">
        <h2>Sports</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
        </ul>
        <h2>Sports</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
        </ul>        
        <h2>Sports</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
        </ul>   
    </div>
    <div class="column">
        <h2>Indoors</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
        </ul>

        <h2>Indoors</h2>
        <ul>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
        </ul>        
    </div>
</div>

</body>
</html>

mikey_w · March 22, 2015, 9:58pm

@ronpat,

I see where I messed up in that I was adding a right margin to each column, when all I had to do was add a right margin to my H2 and UL.

But hypothetically, let’s say my column containers had tons and tons of objects in them to where it would be impractical to add a right margin to everything.

In that case, how would I add a 50px right margin and know how to adjust the percentage so that things always fit?

I see you used a percentage unit on the margin in your code, but is that legitimate?

If you can’t do that, then I don’t know how you figure out 100% - (2 * 50px) = ___% column-width.

Follow me?

ronpat · March 22, 2015, 10:00pm

Then you put a wrapper around the content containers and apply the margin to the wrapper.

I used a percentage and indicated that you can use any unit of measure that suits your design. It will not impinge on the width of the .columns. (am I following you?)

EDIT:

Another thought… if your tons of objects are ultimately within block containers, you could possibly add a common classname to each container and assign the margin to that classname; thus avoiding the extra wrapper.

    <style type="text/css">

.row {clear:both}

.column {
    width: 50%;
    float: left;
    outline:1px solid blue;  /* TEST Outline.  To Be Deleted. */
}
.mymargin {
    margin-right:50px;  /* your choice of unit of measure */
    outline:1px solid magenta;  /* TEST Outline.  To Be Deleted. */
}
    </style>

        <h2 class="mymargin">Sports</h2>
        <ul class="mymargin">
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
        </ul>

etc.

hypothetically, of course.

mikey_w · March 22, 2015, 10:31pm

@ronpat,

I think I’m good for now. Thanks!

system · June 22, 2015, 5:39am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
How do i create multple side by side boxes of text? HTML & CSS	4	874	August 6, 2017
Best way to display 2 columns of 2 columns HTML & CSS	30	10270	October 12, 2015
One List, Multiple Columns HTML & CSS	5	998	June 8, 2010
On list display as 2? HTML & CSS	13	1009	February 20, 2010
Placing two ul lists side by side - Newbie HTML & CSS	6	22193	October 8, 2014

Side by Side Lists?

Related topics