Questions on CSS and Styling

user_18173273 0
Viewed 62

I want to add a second Pokemon Ball on the same line and make it on the far right side and I will remove the search function as its only Gen 1.

One Pokemon Ball

I have two Pokemon Balls now, here is the image:

Two Pokemon Balls

Here is my source code in HTML for the images:

   <a class="navbar-brand" href="#">
       <div class="floatLeft">
       <img src="img/pokemon_logo.png" height="40%" width="50%" alt="Pokemon Logo" />
     </div>

     <h1><strong>Gen 1 Pokemon</strong></h1>

     <div class="floatRight">
       <img src="img/pokemon_logo2.png" height="40%" width="50%"  alt="Pokemon Logo"/>
     </div>
     <!-- <img src="img/pokemon_alt.png" height="20%" width="20% "alt="Pokemon Logo"> -->
     </a>


   <!-- This is where we can search for pokemon -->
   <!-- <form class="form-inline">
     <input class="form-control mr--2" id="search-pokemon" type="search" placeholder="Search for Pokemon" aria-label="Search">
   </form> -->   </nav>```

This is what I have in CSS:


.floatRight{ float:right; clear:right; margin-left:1400px; }```

I have tried align, float and all that cannot seem to figure it out.

Any help would be appreciated!

css html
3 Answers

try to not use floats, they are a bit "old" for todays standards.

For this purpose you can use Flexbox - more about it here: Flexbox

.navbar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
user_107714300

Remove the float right and float left styles and class from html.

set the style

  `a {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }`
user_95303640

You could use display: flex; and justify-content: space-between; to achieve this

.content {
  margin: 50 auto;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<div class="content">
  <p></p>
  <p></p>
</div>

naveen_174470
Related