Creating multiple columns with HTML

Question

I'm very new to this and have been trying to figure this out all day and regardless of how many articles I've read, I just still can't seem to figure out how to get this to work.

I want to have this listed information with 4 at the top and 3 at the bottom, which I believe that I can do with columns. I've read two different ways to do this.

The first way I can get them all on the same row, but can't seem to get the last 3 lists down to a second row. I thought inserting a
tag would work, but it doesn't.

This is in wordpress by the way, in a tab element. Screenshot- [TestTab][1]

   <table cellpadding="0">
<tbody>
<tr>
<td width="335">
    <strong>Brunch/Lunch/Cafes:</strong><br>
<a href="http://www.ouioui.com.ar/" target="_blank">1. Oui Oui</a><br>

<a href="http://www.mooirestaurant.com.ar/" target="_blank">2. Möoi</a><br>

<a href="http://www.brandonrestaurant.com/" target="_blank">3. Brandon</a><br>

<a href="http://pani.com.ar/" target="_blank">4. Pani</a><br>

<a href="http://www.lapanerarosa.com.ar/" target="_blank">5. La Panera Rosa</a><br>
</td>
<td width="335">
    <strong>Quick Eats:</strong><br>
<a href="https://www.yelp.com/biz/fitz-roll-buenos-aires" target="_blank">1. Fitz Roll</a><br>

<a href="http://perez-h.com/" target="_blank">2. Perez H</a><br>

<a href="http://www.lafabricadeltaco.com/" target="_blank">3. La Fábrica del Taco</a><br>

<a href="http://www.romario.com.ar/" target="_blank">4. Romario</a><br>

<a href="https://www.facebook.com/JuiceUpBaires/" target="_blank">5. Juice Up</a><br>
</td>
<td width="335">
<strong>Dinner:</strong><br>
<a href="https://www.yelp.com/biz/sarkis-buenos-aires-2" target="_blank">1. Sarkis</a><br>

<a href="http://lacabrera.com.ar/" target="_blank">2. La Cabrera</a><br>

<a href="http://www.osaka.com.pe/" target="_blank">3. Osaka</a><br>

<a href="http://www.sipanrestaurants.com/" target="_blank">4. Sipan</a><br>

<a href="http://www.properbsas.com.ar/" target="_blank">5. Proper</a><br>

<a href="http://www.tacobox.com.ar/" target="_blank">6. Taco Box</a><br>
</td>
<td width="335">
<strong>Bars/Clubs:</strong><br>
<a href="http://rosebar.com.ar/" target="_blank">1. RoseBar</a><br>

<a href="http://nicetoclub.com/" target="_blank">2. Niceto Club</a><br>

<a href="https://www.facebook.com/SheldonPub" target="_blank">3. Bar Sheldon</a><br>

<a href="http://www.isabelbar.com/" target="_blank">4. Bar Isabel</a><br>

<a href="https://www.facebook.com/M-Salumer%C3%ADa-Enoteca-Bar-de-Vini-Almacen-846143498743275/" target="_blank">5. M Salumeria</a><br>
</td>
<td width="335">
<strong> Closed Door/Speakeasy Bars:</strong><br>
<a href="http://victoriabrownbar.com/" target="_blank">1. Victoria Brown</a><br>

<a href="http://www.bradleyltdbar.com/" target="_blank">2. Bradley Bar</a><br>

<a href="http://www.floreriaatlantico.com.ar/" target="_blank">3. Florería Atlántico</a><br>

<a href="http://www.nicky-harrison.com/" target="_blank">4. Nicky Harrison</a> <font size=2>(Must have dinner reservation first at Nicky NY Sushi)</font><br>

<a href="http://www.878bar.com.ar/" target="_blank">5. Bar 878</a><br>

<a href="http://vernecocktailclub.com/" target="_blank">6. Verne Club</a><br>
</td>
<td width="335">
<strong>Fitness:</strong><br>
<a href="http://www.alwaysgym.com.ar/" target="_blank">1. Always Club</a><br>

<a href="http://sparringcenter.com.ar/" target="_blank">2. Sparring Center</a><br>

<a href="https://www.rockcycle.com.ar/" target="_blank">3. RockCycle</a><br>

<a href="http://www.buenaondayoga.net/" target="_blank">4. Buena Onda Yoga</a><br>

<a href="http://www.omniafc.com.ar/" target="_blank">5. Omni Gym</a><br>
</td>
<td width="335">
<strong>Shopping:</strong><br>
<a href="http://www.distritoarcos.com/" target="_blank">1. Distrito Arcos</a><br>

<a href="http://elsolarshopping.com.ar/" target="_blank">2. El Solar Shopping</a><br>

<a href="http://www.editormarket.com.ar/" target="_blank">3. Editor Market</a><br>

<a href="https://www.google.com.ar/maps/place/Mercado+de+San+Telmo/@-34.619431,-58.3727404,15z/data=!4m5!3m4!1s0x0:0x214afd0cc89733cf!8m2!3d-34.619431!4d-58.3727404" target="_blank">4. San Telmo Market</a> <font size="2">(Only Sundays)</font><br>

<a href="http://www.calmachicha.com/shop/en/" target="_blank">5. Calma Chica</a><br>
</td>
</tr>
</tbody>
</table>

I also found a second way to do this, which I have somewhat been able to get 2 rows now, but they are all off center and also there is a weird box up top cutting things off. Screenshot-[Test2][2]

<div style="width:24%;padding:0 10px 0 0;float:left;">
<strong>Brunch/Lunch/Cafes:</strong><br>
<a href="http://www.ouioui.com.ar/" target="_blank">1. Oui Oui</a><br>

<a href="http://www.mooirestaurant.com.ar/" target="_blank">2. Möoi</a><br>

<a href="http://www.brandonrestaurant.com/" target="_blank">3. Brandon</a><br>

<a href="http://pani.com.ar/" target="_blank">4. Pani</a><br>

<a href="http://www.lapanerarosa.com.ar/" target="_blank">5. La Panera Rosa</a></div>
<div style="width:20%;padding:0 10px 0 0;float:left;">
<strong>Quick Eats:</strong><br>
<a href="https://www.yelp.com/biz/fitz-roll-buenos-aires" target="_blank">1. Fitz Roll</a><br>

<a href="http://perez-h.com/" target="_blank">2. Perez H</a><br>

<a href="http://www.lafabricadeltaco.com/" target="_blank">3. La Fábrica del Taco</a><br>

<a href="http://www.romario.com.ar/" target="_blank">4. Romario</a><br>

<a href="https://www.facebook.com/JuiceUpBaires/" target="_blank">5. Juice Up</a><br></div>
<div style="width:20%;padding:0 10px 0 0;float:left;">
<strong>Dinner:</strong><br>
<a href="https://www.yelp.com/biz/sarkis-buenos-aires-2" target="_blank">1. Sarkis</a><br>

<a href="http://lacabrera.com.ar/" target="_blank">2. La Cabrera</a><br>

<a href="http://www.osaka.com.pe/" target="_blank">3. Osaka</a><br>

<a href="http://www.sipanrestaurants.com/" target="_blank">4. Sipan</a><br>

<a href="http://www.properbsas.com.ar/" target="_blank">5. Proper</a><br>

<a href="http://www.tacobox.com.ar/" target="_blank">6. Taco Box</a><br></div>
<div style="width:20%;padding:0 10px 0 0;float:left;">
  <br>
<strong>Bars/Clubs:</strong><br>
<a href="http://rosebar.com.ar/" target="_blank">1. RoseBar</a><br>

<a href="http://nicetoclub.com/" target="_blank">2. Niceto Club</a><br>

<a href="https://www.facebook.com/SheldonPub" target="_blank">3. Bar Sheldon</a><br>

<a href="http://www.isabelbar.com/" target="_blank">4. Bar Isabel</a><br>

<a href="https://www.facebook.com/M-Salumer%C3%ADa-Enoteca-Bar-de-Vini-Almacen-846143498743275/" target="_blank">5. M Salumeria</a></div>
<div style="width:25%;padding:0 10px 0 0;float:left;">
<strong> Closed Door/Speakeasy Bars:</strong><br>
<a href="http://victoriabrownbar.com/" target="_blank">1. Victoria Brown</a><br>

<a href="http://www.bradleyltdbar.com/" target="_blank">2. Bradley Bar</a><br>

<a href="http://www.floreriaatlantico.com.ar/" target="_blank">3. Florería Atlántico</a><br>

<a href="http://www.nicky-harrison.com/" target="_blank">4. Nicky Harrison</a> <font size=2>(Must have dinner reservation first at Nicky NY Sushi)</font><br>

<a href="http://www.878bar.com.ar/" target="_blank">5. Bar 878</a><br>

<a href="http://vernecocktailclub.com/" target="_blank">6. Verne Club</a></div>
<div style="width:20%;padding:0 10px 0 0;float:left;">
<strong>Fitness:</strong><br>
<a href="http://www.alwaysgym.com.ar/" target="_blank">1. Always Club</a><br>

<a href="http://sparringcenter.com.ar/" target="_blank">2. Sparring Center</a><br>

<a href="https://www.rockcycle.com.ar/" target="_blank">3. RockCycle</a><br>

<a href="http://www.buenaondayoga.net/" target="_blank">4. Buena Onda Yoga</a><br>

<a href="http://www.omniafc.com.ar/" target="_blank">5. Omni Gym</a></div>
<div style="width:20%;padding:0 10px 0 0;float:left;">
  <strong>Shopping:</strong><br>
  <a href="http://www.distritoarcos.com/" target="_blank">1. Distrito Arcos</a><br>

  <a href="http://elsolarshopping.com.ar/" target="_blank">2. El Solar Shopping</a><br>

  <a href="http://www.editormarket.com.ar/" target="_blank">3. Editor Market</a><br>

  <a href="https://www.google.com.ar/maps/place/Mercado+de+San+Telmo/@-34.619431,-58.3727404,15z/data=!4m5!3m4!1s0x0:0x214afd0cc89733cf!8m2!3d-34.619431!4d-58.3727404" target="_blank">4. San Telmo Market</a> <font size="2">(Only Sundays)</font><br>

  <a href="http://www.calmachicha.com/shop/en/" target="_blank">5. Calma Chica</a></div>
<div style=”clear:both;”></div>

Any help here would be greatly appreciated, thanks!

Tab element within a page

Tab edit section

I'd recommend looking into lists to collect the links into a more organized structure first, as most of the HTML is basically chaos. — Jhecht
– Jhecht, Commented Jan 9, 2017 at 2:09
Please provide your CSS. Also the font tag is deprecated, please use CSS instead developer.mozilla.org/en-US/docs/Web/HTML/Element/font — haxxxton
– haxxxton, Commented Jan 9, 2017 at 2:11
@haxxxton removed, thanks. I'm using wordpress, so not sure how to access CSS, nor am I familiar with it. This is inside of a tab element in wordpress, so my editing options seem very limited.. HTML seems like my only option here? I've edited my post and attached 2 screenshots to the end to show what i'm talking about. — sharvs
– sharvs, Commented Jan 9, 2017 at 3:05
is your theme custom? or do you have a link to it? (im trying to determine what "out of the box" css frameworks it might use). Does this "4 column" solution need to be responsive? — haxxxton
– haxxxton, Commented Jan 9, 2017 at 3:13
@haxxxton I'm using the woffice theme for a private portal i'm building: woffice.io — sharvs
– sharvs, Commented Jan 9, 2017 at 3:58

haxxxton · Accepted Answer · 2017-01-09 04:09:04Z

It would appear that woffice uses bootstrap's grid system. To create columns, and have them correctly 'clear' out, you can leverage the following classes:

.row as a wrapper, this will form the "break" between columns when they wrap to multiple lines, and can be useful to ensure that following columns restart from the left.

Bootstrap uses a 12 column grid, so divide 12 by the number of columns you wish to use, and change the .col-md-XX values accordingly. You'll notice i have used .col-xs-6 and .col-md-3 this takes advantage of the responsive grid system that bootstrap offers, to toggle between 2 (12 / 6 = 2) and 4 (12 / 3 = 4) columns respectively.

HTML

<div class="row">
    <div class="col-xs-6 col-md-3">
        <strong>Brunch/Lunch/Cafes:</strong>
        <ol>
            <li><a href="http://www.ouioui.com.ar/" target="_blank">Oui Oui</a></li>
            <li><a href="http://www.mooirestaurant.com.ar/" target="_blank">Möoi</a></li>
            <li><a href="http://www.brandonrestaurant.com/" target="_blank">Brandon</a></li>
            <li><a href="http://pani.com.ar/" target="_blank">Pani</a></li>
            <li><a href="http://www.lapanerarosa.com.ar/" target="_blank">La Panera Rosa</a></li></ol>
        </ol>
    </div>
    <div class="col-xs-6 col-md-3">
        <strong>Quick Eats:</strong>
        <ol>
            <li><a href="https://www.yelp.com/biz/fitz-roll-buenos-aires" target="_blank">Fitz Roll</a></li>
            <li><a href="http://perez-h.com/" target="_blank">Perez H</a></li>
            <li><a href="http://www.lafabricadeltaco.com/" target="_blank">La Fábrica del Taco</a></li>
            <li><a href="http://www.romario.com.ar/" target="_blank">Romario</a></li>
            <li><a href="https://www.facebook.com/JuiceUpBaires/" target="_blank">Juice Up</a></li></ol>
        </ol>
    </div>
    <div class="col-xs-6 col-md-3">
        <strong>Dinner:</strong>
        <ol>
            <li><a href="https://www.yelp.com/biz/sarkis-buenos-aires-2" target="_blank">Sarkis</a></li>
            <li><a href="http://lacabrera.com.ar/" target="_blank">La Cabrera</a></li>
            <li><a href="http://www.osaka.com.pe/" target="_blank">Osaka</a></li>
            <li><a href="http://www.sipanrestaurants.com/" target="_blank">Sipan</a></li>
            <li><a href="http://www.properbsas.com.ar/" target="_blank">Proper</a></li>
            <li><a href="http://www.tacobox.com.ar/" target="_blank">Taco Box</a></li></ol>
        </ol>
    </div>
    <div class="col-xs-6 col-md-3">
        <strong>Bars/Clubs:</strong>
        <ol>
            <li><a href="http://rosebar.com.ar/" target="_blank">RoseBar</a></li>
            <li><a href="http://nicetoclub.com/" target="_blank">Niceto Club</a></li>
            <li><a href="https://www.facebook.com/SheldonPub" target="_blank">Bar Sheldon</a></li>
            <li><a href="http://www.isabelbar.com/" target="_blank">Bar Isabel</a></li>
        <li><a href="https://www.facebook.com/M-Salumer%C3%ADa-Enoteca-Bar-de-Vini-Almacen-846143498743275/" target="_blank">M Salumeria</a></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-3">
        <strong> Closed Door/Speakeasy Bars:</strong>
        <ol>
            <li><a href="http://victoriabrownbar.com/" target="_blank">Victoria Brown</a></li>
            <li><a href="http://www.bradleyltdbar.com/" target="_blank">Bradley Bar</a></li>
            <li><a href="http://www.floreriaatlantico.com.ar/" target="_blank">Florería Atlántico</a></li>
            <li><a href="http://www.nicky-harrison.com/" target="_blank">Nicky Harrison</a> <small>(Must have dinner reservation first at Nicky NY Sushi)</small></li>
            <li><a href="http://www.878bar.com.ar/" target="_blank">Bar 878</a></li>
            <li><a href="http://vernecocktailclub.com/" target="_blank">Verne Club</a></li></ol>
        </ol>
    </div>

    <div class="col-xs-6 col-md-3">
        <strong>Fitness:</strong>
        <ol>
            <li><a href="http://www.alwaysgym.com.ar/" target="_blank">Always Club</a></li>
            <li><a href="http://sparringcenter.com.ar/" target="_blank">Sparring Center</a></li>
            <li><a href="https://www.rockcycle.com.ar/" target="_blank">RockCycle</a></li>
            <li><a href="http://www.buenaondayoga.net/" target="_blank">Buena Onda Yoga</a></li>
            <li><a href="http://www.omniafc.com.ar/" target="_blank">Omni Gym</a></li></ol>
        </ol>
    </div>

    <div class="col-xs-6 col-md-3">
        <strong>Shopping:</strong>
        <ol>
            <li><a href="http://www.distritoarcos.com/" target="_blank">Distrito Arcos</a></li>
            <li><a href="http://elsolarshopping.com.ar/" target="_blank">El Solar Shopping</a></li>
            <li><a href="http://www.editormarket.com.ar/" target="_blank">Editor Market</a></li>
            <li><a href="https://www.google.com.ar/maps/place/Mercado+de+San+Telmo/@-34.619431,-58.3727404,15z/data=!4m5!3m4!1s0x0:0x214afd0cc89733cf!8m2!3d-34.619431!4d-58.3727404" target="_blank">San Telmo Market</a> <small>(Only Sundays)</small></li>
            <li><a href="http://www.calmachicha.com/shop/en/" target="_blank">Calma Chica</a></li>
        </ol>
    </div>
</div>

PS. As per my comment, if you have access to the theme files, in order to customise them, you should (as much as possible) try to avoid using inline styles, and instead be appending them to the themes styles.css file. This can usually be accessed through Appearance -> Editor in the wordpress dashboard.

amazing, this worked perfectly thank you! I'm assuming that the <li></li> tag just requires the spacing between the list items, correct? Not a big deal if so, thanks for your help!
in terms of "semantic" web development, if you have "lists" of things, its best to use list elements to present them (ie, ol or ul with li child elements).

Josh Miller · Accepted Answer · 2017-01-09 03:15:19Z

This should give you what you're looking for. Using floated-div's and ol/li tags is the right pattern for what you're trying to accomplish. You can continue adding more category blocks and they will continue to behave the same. Each category div will fill up 25% of the width of the container it's inside of and after four categories the fifth will drop to another line. You can adjust this by changing the 23% value to 18% (5), 13% (6), etc.

<style>
.category{
  float: left;
  width: 23%;
  margin: 1%;
  padding: 0;
  min-height: 175px;
  max-height: 300px;
}

.category>ol{
  margin-left: 20px;
  padding: 0;
}
</style>

<div class="category">
  <strong>Brunch/Lunch/Cafes:</strong>
  <ol>
    <li><a href="http://www.ouioui.com.ar/" target="_blank">Oui Oui</a></li>
    <li><a href="http://www.mooirestaurant.com.ar/" target="_blank">Möoi</a></li>
    <li><a href="http://www.brandonrestaurant.com/" target="_blank">Brandon</a></li>
    <li><a href="http://pani.com.ar/" target="_blank">Pani</a></li>
    <li><a href="http://www.lapanerarosa.com.ar/" target="_blank">La Panera Rosa</a></li></ol>
  </ol>
</div>

<div class="category">
  <strong>Quick Eats:</strong>
  <ol>
    <li><a href="https://www.yelp.com/biz/fitz-roll-buenos-aires" target="_blank">Fitz Roll</a></li>
    <li><a href="http://perez-h.com/" target="_blank">Perez H</a></li>
    <li><a href="http://www.lafabricadeltaco.com/" target="_blank">La Fábrica del Taco</a></li>
    <li><a href="http://www.romario.com.ar/" target="_blank">Romario</a></li>
    <li><a href="https://www.facebook.com/JuiceUpBaires/" target="_blank">Juice Up</a></li></ol>
  </ol>
</div>

<div class="category">
  <strong>Dinner:</strong>
  <ol>
    <li><a href="https://www.yelp.com/biz/sarkis-buenos-aires-2" target="_blank">Sarkis</a></li>
    <li><a href="http://lacabrera.com.ar/" target="_blank">La Cabrera</a></li>
    <li><a href="http://www.osaka.com.pe/" target="_blank">Osaka</a></li>
    <li><a href="http://www.sipanrestaurants.com/" target="_blank">Sipan</a></li>
    <li><a href="http://www.properbsas.com.ar/" target="_blank">Proper</a></li>
    <li><a href="http://www.tacobox.com.ar/" target="_blank">Taco Box</a></li></ol>
  </ol>
</div>

<div class="category">
  <strong>Bars/Clubs:</strong>
  <ol>
    <li><a href="http://rosebar.com.ar/" target="_blank">RoseBar</a></li>
    <li><a href="http://nicetoclub.com/" target="_blank">Niceto Club</a></li>
    <li><a href="https://www.facebook.com/SheldonPub" target="_blank">Bar Sheldon</a></li>
    <li><a href="http://www.isabelbar.com/" target="_blank">Bar Isabel</a></li>
  <li><a href="https://www.facebook.com/M-Salumer%C3%ADa-Enoteca-Bar-de-Vini-Almacen-846143498743275/" target="_blank">M Salumeria</a></li>
  </ol>
</div>

<div class="category">
  <strong> Closed Door/Speakeasy Bars:</strong>
  <ol>
    <li><a href="http://victoriabrownbar.com/" target="_blank">Victoria Brown</a></li>
    <li><a href="http://www.bradleyltdbar.com/" target="_blank">Bradley Bar</a></li>
    <li><a href="http://www.floreriaatlantico.com.ar/" target="_blank">Florería Atlántico</a></li>
    <li><a href="http://www.nicky-harrison.com/" target="_blank">Nicky Harrison</a> <small>(Must have dinner reservation first at Nicky NY Sushi)</small></li>
    <li><a href="http://www.878bar.com.ar/" target="_blank">Bar 878</a></li>
    <li><a href="http://vernecocktailclub.com/" target="_blank">Verne Club</a></li></ol>
  </ol>
</div>

<div class="category">
  <strong>Fitness:</strong>
  <ol>
    <li><a href="http://www.alwaysgym.com.ar/" target="_blank">Always Club</a></li>
    <li><a href="http://sparringcenter.com.ar/" target="_blank">Sparring Center</a></li>
    <li><a href="https://www.rockcycle.com.ar/" target="_blank">RockCycle</a></li>
    <li><a href="http://www.buenaondayoga.net/" target="_blank">Buena Onda Yoga</a></li>
    <li><a href="http://www.omniafc.com.ar/" target="_blank">Omni Gym</a></li></ol>
  </ol>
</div>

<div class="category">
  <strong>Shopping:</strong>
  <ol>
    <li><a href="http://www.distritoarcos.com/" target="_blank">Distrito Arcos</a></li>
    <li><a href="http://elsolarshopping.com.ar/" target="_blank">El Solar Shopping</a></li>
    <li><a href="http://www.editormarket.com.ar/" target="_blank">Editor Market</a></li>
    <li><a href="https://www.google.com.ar/maps/place/Mercado+de+San+Telmo/@-34.619431,-58.3727404,15z/data=!4m5!3m4!1s0x0:0x214afd0cc89733cf!8m2!3d-34.619431!4d-58.3727404" target="_blank">San Telmo Market</a> <small>(Only Sundays)</small></li>
    <li><a href="http://www.calmachicha.com/shop/en/" target="_blank">Calma Chica</a></li>
  </ol>
</div>

Thanks for this Josh, this definitely got this looking the most normal that I've had it yet. I changed the value to 18%, but still showing up a bit weird. There is now a lot of space between each of the numbered list items, but also the weird square box across the top. Screenshot here: portal.we-roam.com/wp-content/uploads/2017/01/lists.png

Collectives™ on Stack Overflow

Creating multiple columns with HTML

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related