How would you display these two div elements?

Issue

I’m struggling to display two div elements correctly right next to each other and I’m not sure what would be the best way to go about this.
Here you can see what it looks like live

And this would be the code:

This is the first element shown in the picture, the second div has this exact same code, only the text/image changes.

<main class="page"><h1>Downloads</h1>
       <div class="album1">
           <div class="image">
           <img src="IMAGES/led-zeppelin-iii-1555363141.jpg" alt="album1">
           </div>
           <div class="text">
           <h2>Led Zeppelin III</h2>
       <ol>
           <li><a href="#">Immigrant Song</a></li>
           <li><a href="#">Friends</a></li>
           <li><a href="#">Celebration Day</a></li>
           <li><a href="#">Since I've been Loving You</a></li>
           <li><a href="#">Out on the Tiles</a></li>
           <li><a href="#">Gallows Pole</a></li>
           <li><a href="#">Tangerine</a></li>
           <li><a href="#">That's the Way</a></li>
           <li><a href="#">Bron-Y-Aur Stomp</a></li>
           <li><a href="#">Hats Off to Roy Harper</a></li>
       </ol>
           </div>
           </div>

And this is what I have for CSS for both main div elements, both are called album1 and album2. The actual text has its own div that applies to both elements.

.album1
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
margin-right: 30px;
}

.album2
{
display: flex;
float: right;
align-items:flex-start;
padding-bottom: 85px;
}

Your help would greatly be appreciated cause this is for my final and the professor isn’t any help 🙁

If you need additional info I will happily provide it, sorry I’m still getting the hang of this.

Solution

From what I understand, you want to display the albums side by side.
To achieve that you can place both the albums in a parent container (Example: classname = albums) and give it a display:flex.

Also you can use justify-content: space-between; to place it in two ends. float: right; is not required.

.albums {
  display: flex;
  justify-content: space-between;
}
.album1
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
margin-right: 30px;
}

.album2
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
}
<main class="page"><h1>Downloads</h1>
       <div class="albums">
            <div class="album1">
               <div class="image">
               ASDASD
               </div>
               <div class="text">
                     <h2>Led Zeppelin III</h2>
                     <ol>
                         <li><a href="#">Immigrant Song</a></li>
                         <li><a href="#">Friends</a></li>
                         <li><a href="#">Celebration Day</a></li>
                         <li><a href="#">Since I've been Loving You</a></li>
                         <li><a href="#">Out on the Tiles</a></li>
                         <li><a href="#">Gallows Pole</a></li>
                         <li><a href="#">Tangerine</a></li>
                         <li><a href="#">That's the Way</a></li>
                         <li><a href="#">Bron-Y-Aur Stomp</a></li>
                         <li><a href="#">Hats Off to Roy Harper</a></li>
                     </ol>
               </div>
           </div>
           <div class="album1">
             <div class="image">
             ASDASD
             </div>
             <div class="text">
                   <h2>Led Zeppelin III</h2>
                   <ol>
                       <li><a href="#">Immigrant Song</a></li>
                       <li><a href="#">Friends</a></li>
                       <li><a href="#">Celebration Day</a></li>
                       <li><a href="#">Since I've been Loving You</a></li>
                       <li><a href="#">Out on the Tiles</a></li>
                       <li><a href="#">Gallows Pole</a></li>
                       <li><a href="#">Tangerine</a></li>
                       <li><a href="#">That's the Way</a></li>
                       <li><a href="#">Bron-Y-Aur Stomp</a></li>
                       <li><a href="#">Hats Off to Roy Harper</a></li>
                   </ol>
             </div>
           </div>
       </div>

Answered By – subodhkalika

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.