CODEWITHSUNDEEP
htmlcssflexbox
Login
Login

Reputation: 153

CSS Flex Box won't align properly

I have the following html code:

body{
    background-color: #ddd;
}
.container{
    /*width: 100%;
    height: 1100;
    background-color: #666;*/
    display: -webkit-flex;
    display: flex;
    /*flex-direction:column;
    flex-wrap: column nowrap;
    flex-flow:column wrap;*/
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.news{
    width: 453px;
    height: 168px;
    background-color: #fff;
    border: 1px solid #999;
    padding: 15px;
    margin-bottom: 10px;
}
.video{
    width: 288px;
    height: 168px;
    background-color: #fff;
    border: 1px solid #999;
    padding: 15px;
    margin-bottom: 10px;
}
#news1{
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 10px;
}
#news2{
    margin-left: 5px;
    margin-right: 10px;
    margin-top: 10px;
}
#video1{
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 10px;
}
#video2{
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
}
#video3{
    margin-left: 5px;
    margin-right: 10px;
    margin-top: 10px;
}
.test,header {
    background-color: red;
    background-repeat: no-repeat;
    color: #fff;
    background-color: #fff;
    width: 968px;
    height: 68px;
    border: 1px solid #999;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}
<html>
<head>
  <title>Brand</title>
  <link rel="stylesheet" type="text/css" href="css/flex_styles.css">
</head>
<body>
  <div class="container" id="maincontain">
      <header>
          <h1>Brand</h1>
          <img src="img/logo.png" alt="Brand-logo">

          <!--<nav>
              <ul>
                  <li><a class="navlinks" href="https://facebook.com">Facebook</a></li>
              <li><a class="navlinks" href="https://twitter.com">Twitter</a></li>
              <li><a class="navlinks" href="https://instagram.com">Instagram</a></li>


              </ul>
          </nav>-->
      </header>

      <!-- News -->
      <section class="newz" id="newsid">

          <article class="news" id="news1">
              <!--<img class="newspics" src="img/news1.png">
              <p class="newstext">This is some random text.</p>
              <a class="newslinks" href="htpps://facebook.com">Link to     facebook article.</a>
          -->
          </article>

          <article class="news" id="news2">
              <!--<img class="newspics" src="img/news2.png">
              <p class="newstext">This is some random text.</p>
              <a class="newslinks" href="htpps://facebook.com">Link to     facebook article.</a>
              -->
          </article> 
      </section>

      <!-- Videos -->
      <section class="videos" id="videosid">

          <video class="video" id="video1">
              <source src="tst.mp4" type="video/mp4">
          </video>    

          <video class="video" id="video2">
              <source src="tst.mp4" type="video/mp4">
          </video>    

          <video class="video" id="video3">
              <source src="tst.mp4" type="video/mp4">
          </video> 
      </section>

      <!-- Footer -->
      <footer class="footer" id="footerid">
          <div class="test">
              <a class="footlinks" href="https://www.facebook.com">facebook</a>
          <a class="footlinks" href="https://www.facebook.com">facebook</a>
          <a class="footlinks"href="https://www.facebook.com">facebook</a>
          </div>
      </footer>
  </div>
</body>
</html>

So my questions:

Why aren't my news boxes on the same height, or why are my videos on the same height, and how to fix it?

Upvotes: 1

Views: 763

Answers (2)

Zach Harriott
Zach Harriott

Reputation: 123

The section containing your two news articles isn't a flexbox.

Add the following code to your CSS and it should work perfectly.

.newz {
  display: flex;
}

Also, I'm no pro but I would suggest rethinking how you name your classes. I got a bit confused looking at the code and seeing the two classes .news and .newz. When I go about naming my classes I tend to use names related to the positioning on the page. So for example I would have made that class something along the lines of .row-2. Again, this is entirely subjective.

Hope this helped you at all? Let me know if I need to explain anything and I'd be happy to go on.

Upvotes: 1

Bhawna
Bhawna

Reputation: 705

The reason is that the tag you used for news is article and that has inbuilt style of display: block.

There is no concern of flex it. try to use display: inline-block; in you news.

Fiddle: https://jsfiddle.net/497vm0go/

Upvotes: 3

Related Questions