Two columns list in HTML

14 Sep, 2022

The simplest and shortest post I've written in a long time but it will serve the purpose of not having to Google it every time I need to remember how it's done.

Every time I write a blog post about a new topic I tend to follow a specific pattern based on the approach of a professor in Tecnología Electrónica I had in university.

His take was that in order to grasp a concept even and adequately before diving into the details, one must answer the Why, How, and What For questions. I've built on top of that by often adding a Pros/Cons section to whichever topic I write about.

I lay the Pros/Cons in a sequence way but I figure it's more comfortable to have a two-column layout to see them "synchronously" in a way.

Here's the code:

<div style="float: left; width: 50%;">
   <ul>
      <li>Left Item 1</li>
      <li>Left Item 2</li>
      <li>Left Item 3</li>
      <li>Left Item 4</li>
      <li>Left Item 5</li>
   </ul>
</div>
<div style="float: right; width: 50%;">
   <ul>
      <li>Right Item 1</li>
      <li>Right Item 2</li>
      <li>Right Item 3</li>
      <li>Right Item 4</li>
      <li>Right Item 5</li>
   </ul>
</div>

I write the articles using markdown but since it allows to embed HTML directly, no worries.

🥕 Subscribe to my blog via email

Have fun!

#html #programming