Create a Horizontal Card with CSS

Question

I would like to create a horizontal card that will look like this:

How can I make it so the "LINK with Icon" divs are evenly spaced out within their own div container?

I tried using padding on .colum div {} to space them out but it won't.

This is what I have so far:

    <body>
      <div class="container">
        <div clas="colum">
          <div>
          Github
          </div>
          <div>
          Libguides:
          </div>
          <div>
          Instagram:
          </div>
        </div>
      <div class="image">
        <img src="image.jpg" alt="cartoon image">
      </div>
  </div>  
</body>

Codepen

you should check out [grid](https://css-tricks.com/snippets/css/complete-guide-grid/). It's a great way to layout items with CSS — Omar Yafer, Dec 09 '19 at 20:58

score 2 · Answer 1 · answered Dec 09 '19 at 20:59

Typo in name.

body {
  background: beige;
  color: black;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.container {
  display: flex;
  width: 100%;
  border: 2px solid red;
}

.colum {
  flex-direction: column;
  margin-right: 10px;
  flex: 1;
}

.colum div {
  background-color: aqua;
  font-size: 1.4rem;
  padding: 5px 0;
  border: 2px solid green;
}

.card {
  margin-left: 10px
}

.image {
  background: grey;
  flex: 1;
}

.image img {
  display: block;
  padding: 5px;
}

<div class="container">
  <div class="colum">
    <div>
      Github
    </div>
    <div>
      Libguides:
    </div>
    <div>
      Instagram:
    </div>
  </div>
  <div class="image">
    <img src="image.jpg">
  </div>

</div>

score -1 · Answer 2 · answered Dec 09 '19 at 20:59

-1

You can use flexbox to achieve what you want:

.colum {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

answered Dec 09 '19 at 20:59

Kostas Minaidis

4,681
3
17
25

Create a Horizontal Card with CSS

2 Answers2