I want to add a card and image adjacent to each other in column format

Question

I want to add one card and an image,in two adjacent columns.But when I am trying to do it is coming in row manner,but what I want is that left side should be filled with card and right side with the image.

The div='column1' contains the div in which image is present.The image must be on the right hand side and must be adjacent to card

The div='column2' contains the card div and should be placed on the left on hand side.

My two div tags are appearing stacked whereas I want them to be appear adjacent to each other such as in columns.

Also does is there a difference between span and div tag, cause as far as I have used them they all feel the same to me.

Can anyone guide me in this context, also i am very bad with these columns and rows and grids stuff with css , any link that might help?

.column {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 10px;
  height: 500px;
  width: 400px;
  /* Should be removed. Only for demonstration */
}

.column {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 10px;
  height: 500px;
  width: 900px;
  /* Should be removed. Only for demonstration */
}

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Arial;
}

.card_agi_container {
  border-radius: 10px;
  background-color: #732a12;
  width: 250px;
  height: auto;
  margin: 10%;
  padding: 10px;
}

.background {
  text-align: center;
  background: linear-gradient(to left, #120a07, #851804);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.content {
  background: linear-gradient(to left, #120a07, #851804);
  padding: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.image {
  height: 150px;
  width: 250px;
  border-radius: 5px;
}

.hero-name {
  text-align: center;
  font-size: 19px;
  font-weight: lighter;
  padding: 10px;
}

.hero-type {
  background-color: black;
  padding: 7px;
  color: whitesmoke;
  border-radius: 5px;
  width: 100px;
  display: block;
  text-align: center;
  position: relative;
  top: -70px;
}

.dota2-hero-profile {
  text-align: center;
  font-size: 14px;
  padding: 20px;
}

.hero-stats>p {
  letter-spacing: 1px;
}

<div class="top-part">
  <div class="row" text-align: center;>

    <!-- The div for the card -->
    <div class="column2">

      <div class="card_agi_container">
        <div class="background">
          <img src="C:\Users\Hp\Desktop\New folder\img.jpg" class="image" alt="Nevermore">
        </div>

        <div class="content">
          <h1 class="hero-name">Shadow Fiend</h1>
          <span class="hero-type">Agility</span>
          <div class="hero-stats">
            <p>Win Rate : 50%</p>
            <p>Pick Rate :50%</p>
            <p>Ban Rate : 50%</p>
            <p color="green">Percentage Change :2.3%</p>
          </div>
          <h1 class="dota2-hero-profile">Detail View</h1>
        </div>
      </div>
    </div>

    <!-- The div for the image -->
    <div class="column1">
      <div class="profile-image">
        <img src="E:\FAST\Hit\E-sports-Lab\img\hero-profile\sf.png">
      </div>
    </div>
  </div>
</div>

score 1 · Answer 1 · answered Aug 14 '19 at 02:23

When you use flex box you have to set the container to display flex. In your example, adding the following will create 2 columns.

.row{
    display: flex;
}

This tells the browser to divide up everything inside of .row into equal columns. Because there are 2 div tags inside of .row the result is that you will end up with each one in it's own column. If you want them to be equal width columns, you can add width: 50% to each column.

Do you want to have the profile image be inside of the red area, or outside of it? If you're wanting it to be inside of the red box, then you would want to set the display type of the .content div to display: flex, and then have two divs inside of that element for the two different columns.

As a side note, I noticed in your CSS you had some stuff for .column when I think you meant for it to be .column1.

As for the difference between divs and spans. A div is a block level elements while a span is an inline element. This means that a div tag is essentially the same as a span tag with display: block. Although the browser might freak out if you try to put div tags inside of span tags, so there's a little more to it than just that.

Normally you'll use divs (along with other tags like section, main, article, etc.) to layout everything. Then if there are parts of an element (like a few words of a sentence or an icon) that you would like to add some additional styling to without creating a line break (which is what you would get from a block element) then you would use a span tag.

If you take a look at this question, you'll get a better explanation along with some examples of when to use each.

thanks alot, a lot clear and precise explanation and thank you for your help — Muhammad Ammar, Aug 14 '19 at 10:26

score 0 · Accepted Answer · answered Aug 14 '19 at 00:06

Inline block is the easiest solution.

.column1, .column2 {
   display: inline-block;
   vertical-align: top;
}

You can remove the margin on .card_agi_container, or add the same margin to .profile-image to achieve the same dimensions.

Span tag is usually used to highlight text and make small changes. Div is used to hold general content.

I want to add a card and image adjacent to each other in column format

2 Answers2