Two columns list in HTML
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.
- Easier to grasp the pros/cons
- That would be it 🕵🏽♀️
- You have to write HTML in Markdown
- That's not really a problem 🤾🏽♂️
🥕 Subscribe to my blog via email