CODEWITHSUNDEEP
htmlcssflexbox
stackedandcracked
stackedandcracked

Reputation: 49

trouble aligning two divs within main

I have two divs within a main tag and a div. I'm trying to align them horizontally besides each other but nothing I've tried is working. I've tried display:inline, flex, float, block, flex-direction... but none are working. Some help would be great, thanks.

css:

<div class="flexbox">
       <main>  
            <div class="playlist-box">
                <div class="site-playlist">
                    ex
                </div>
            </div>
            <div class="right-column">
                <div class="main-heading">
                    What I've Been Up To:
                </div>
            </div>
       </main>
</div>

.flexbox {
    display: flex;
}


main {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
}

.site-playlist {
    height: 200px;
    width: 25%;
    margin-left: 0;
    padding-left: 5px;
    text-align: center;
    padding-top: 5px;
    overflow: scroll;
}

Upvotes: 0

Views: 22

Answers (2)

MrPatel2021
MrPatel2021

Reputation: 221

I try to resolve your problem:

<!DOCTYPE html>
<html>
   <style>
      .flexbox {
      display: flex;
      }
      main {
      width: 100%;
      flex-direction: row;
      flex-wrap: nowrap;
      display:flex;
      }
      .site-playlist {
      height: 200px;
      width: 100%;
      margin-left: 0;
      padding-left: 5px;
      text-align: center;
      padding-top: 5px;
      overflow: scroll;
      }
      .playlist-box {
      width:25%
      }
      .right-column {
      width:75%
      }
   </style>
   <body>
      <div class="flexbox">
         <main>
            <div class="playlist-box">
               <div class="site-playlist">
                  ex
               </div>
            </div>
            <div class="right-column">
               <div class="main-heading">
                  What I've Been Up To:
               </div>
            </div>
         </main>
      </div>
   </body>
</html>

Is this what you expect.

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

You have to apply flex style to your main element.

.flexbox {
    display: flex;
}


main {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    display:flex;
}

.site-playlist {
    height: 200px;
    width: 100%;
    margin-left: 0;
    padding-left: 5px;
    text-align: center;
    padding-top: 5px;
    overflow: scroll;
}
.playlist-box {
  width:25%
}
.right-column {
  width:75%
}
<div class="flexbox">
       <main>  
            <div class="playlist-box">
                <div class="site-playlist">
                    ex
                </div>
            </div>
            <div class="right-column">
                <div class="main-heading">
                    What I've Been Up To:
                </div>
            </div>
       </main>
</div>

Upvotes: 1

Related Questions