CODEWITHSUNDEEP
htmlcssflexboxinline
Areeb
Areeb

Reputation: 5

Displaying div inline

I'm currently making a website for my games and I'm currently on the game page. I have added all the (6) games but they are all below each other which is not what I wanted. I wanted them all to be inline and when the other games cant fit in the line it carries on a new line.

This is the code I used before the inline

.games_image:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#games {
  background-color: black;
  margin: 0;
}

.games_content_fig_desc {
  color: white !important;
  width: 250px;
  margin-top: 15px;
}

.games_content {
  display: inline;
}


.games_content_fig {
  margin-left: 55px;
  color: #ffec00;
}

.download_button:hover {
  transform: scale(1.1);
}

.download_button {
  background-color: #ff7171; /* Default Website Color Scheme */
  margin: 25px 55px;
  border: none;
  color: white;
  padding: 15px 32px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}

.games_image {
  height: 200px;
  margin: 25px 25px;
  margin-bottom: 25px;
  border-radius: 50px;
}
      <div id="games">
            <div class="games_content">
              <div class="dream_blast">
                <figure>
                <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption></a>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angry_birds">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_match">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds-friends">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_evolution">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_blast">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_pop">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_transform">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
            </div>
          </div>

This is the CSS I tried for the inline:

.games_content {display: inline-block;}
.games_content { display: flexbox;}

Upvotes: 0

Views: 44

Answers (3)

phi1DS
phi1DS

Reputation: 31

As i understand it, .games_content is the container of your element that you wish where displayed horizontally.

You got 2 options : use properly flexbox on the container (.games_content), i suggest you dig flexbox a bit more because a simple 'display: flexbox;' won't do the trick and it's a bit more complicated than that.

OR

All children div(.dream_blast, angry_birds, etc) should have a 'display: inline-block' property.

Quick solution :

Add : .games_content > div { display: inline-block; }

That will select all direct div children of .games_content and apply the wanted display style.

Upvotes: 0

Kev Rob
Kev Rob

Reputation: 322

Use 'display:flex' in .games_content.

.games_image:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#games {
  background-color: black;
  margin: 0;
}

.games_content_fig_desc {
  color: white !important;
  width: 250px;
  margin-top: 15px;
}

.games_content {
  display: flex;
  flex-wrap:wrap;
}


.games_content_fig {
  margin-left: 55px;
  color: #ffec00;
}

.download_button:hover {
  transform: scale(1.1);
}

.download_button {
  background-color: #ff7171; /* Default Website Color Scheme */
  margin: 25px 55px;
  border: none;
  color: white;
  padding: 15px 32px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}

.games_image {
  height: 200px;
  margin: 25px 25px;
  margin-bottom: 25px;
  border-radius: 50px;
}
      <div id="games">
            <div class="games_content">
              <div class="dream_blast">
                <figure>
                <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption></a>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angry_birds">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_match">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds-friends">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_evolution">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_blast">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_pop">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_transform">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
            </div>
          </div>

Upvotes: 0

Johannes
Johannes

Reputation: 67798

The essential change you need to make is on the .games_content div:

.games_content {
  display: flex;
  flex-wrap: wrap;
}

This will allow its children to be on one line and wrap when necessary.

.games_image:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#games {
  background-color: black;
  margin: 0;
}

.games_content_fig_desc {
  color: white !important;
  width: 250px;
  margin-top: 15px;
}

.games_content {
  display: flex;
  flex-wrap: wrap;
}

.games_content_fig {
  margin-left: 55px;
  color: #ffec00;
}

.download_button:hover {
  transform: scale(1.1);
}

.download_button {
  background-color: #ff7171;
  /* Default Website Color Scheme */
  margin: 25px 55px;
  border: none;
  color: white;
  padding: 15px 32px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}

.games_image {
  height: 200px;
  margin: 25px 25px;
  margin-bottom: 25px;
  border-radius: 50px;
}
<div id="games">
  <div class="games_content">
    <div class="dream_blast">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        </a>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angry_birds">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds_match">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds-friends">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds_evolution">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds_blast">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds_pop">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds_transform">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions