The alignment of the columns is off:
https://i.sstatic.net/1l4CO.png
The issue: https://i.sstatic.net/Iokm9.jpg
I am looking to create a blog layout with 2 columns:
- one column for the main content, displaying articles
- the other column as a menu
To achieve this, I am using CSS code as I couldn't think of any other method (refer to the code below).
In terms of my HTML structure, I aim to keep it simple and tidy (check out the code below).
How can I align the second column properly with the first one?
There seems to be some padding around 20px but it isn't present in my code. I am at a loss on how to fix this.
.column {
float: left;
padding-top: 1%;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
/* Left Column (main) */
.column.main {
width: 76%;
background-color: grey;
padding-bottom: 1%;
padding-right: 1%;
padding-left: 1%;
}
/* Right Column (menu) */
.column.menu {
width: 20%;
background-color: lightgrey;
padding-bottom: 1%;
padding-right: 1%;
padding-left: 1%;
}<div class="column main">
<div class="card">
Content
</div>
</div>
<div class="column menu">
<div class="card">
<h3 align="center">Main Menu</h3>
<li>Main Menu</li>
<li>English</li>
<li>German</li>
<li>Spanish</li>
</div>
</div>