How can I align two columns horizontally?

Question

The columns aren't horizontally aligned :

The problem: https://i.stack.imgur.com/Iokm9.jpg

I want to make 2 columns in my blog:

one is the main page of the blog with articles
the other one is a menu.

I decided to do that through CSS as I have no other idea how to do that :) (take a look at the code below).

As for my HTML, I'm trying to keep it as clean as possible (take a look at the code below).

How can I align the second column with the other one?

It seems like there's some padding about 20px but it doesn't even exist within my entire code. I swear to god I don't know what to do with 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>

What do you mean by flex? I'm not really good at CSS and HTML yet. — Nickle Sydney, Sep 21 '19 at 13:59
Your
tag should be assign CSS classes with correct styles set. HAve a look at this question: https://stackoverflow.com/questions/2716955/aligning-two-divs-side-by-side — Shiham, Sep 21 '19 at 14:16
See here is flex tutorial if you want to learn about flex.. https://www.w3schools.com/css/css3_flexbox.asp — mohitesachin217, Sep 23 '19 at 04:30

score 0 · Answer 1 · answered Sep 21 '19 at 13:40

Use a CSS Reset to remove any default margins and also note that your HTML is invalid. li must be contained in a ul wrapper.

.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%;
}

* {
  margin: 0;
}

<div class="column main">
  <div class="card">
    Content
  </div>
</div>

<div class="column menu">
  <div class="card">
    <h3 align="center">Main Menu</h3>
    <ul>
      <li>Main Menu</li>
      <li>English</li>
      <li>German</li>
      <li>Spanish</li>
    </ul>
  </div>
</div>

sameera lakshitha · Answer 2 · 2019-09-21T13:51:41.923

0

You can fix this by setting all your margins to zero.

* {
   margin: 0;
   padding: 0;
}

Because some HTML elements have predefined margins (body, h1 to h6, p, fieldset, form, ul, ol, dl, dir, menu, blockquote and dd).

edited Sep 21 '19 at 13:51

answered Sep 21 '19 at 13:43

sameera lakshitha

1,925
4
21
29

score 0 · Answer 3 · answered Sep 21 '19 at 23:19

Try this ; HTML

<div class="content">
<div class="main">Content</div>
<div class="menu">
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
        <li>Message</li>
    </ul>
</div>

CSS

.content {
margin: 10px;
padding: 10px;
display: grid;
grid-template-columns: 90% auto;
grid-gap: 10px;
}
.main {
text-align: center;
background: grey;
}
.menu {
background: blue;
}

score 0 · Answer 4 · answered Sep 22 '19 at 01:13

0

You can just try this it will help you to create two columns side by side HTML!

   <div class="row">
   <div class="column"></div>
   <div class="column"></div>
   </div>

answered Sep 22 '19 at 01:13

Devop

1

How can I align two columns horizontally?

4 Answers4