Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jason Ladieu
Jason Ladieu
10,635 Points

Flexbox help!!

Hi, I'm trying to get the flexbox elements to align like this: https://i.stack.imgur.com/1od7u.png

In my case: I want the .colors-flex-container to be the column with .featured-img-flex and .featured-work-flex as the rows next to it. I can't seem to figure this out. Can someone help!!

There are obvious unfinished parts of this code so please disregard other issues - I just have not gotten to them yet.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jason's Portfolio Page</title>
    <link rel="stylesheet" href="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/main.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <header>
        <nav>
          <div class="nav-content nav-flex-container">
            <div class="nav-item-1">
              <img id="logo" src="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/images/Udacity_logo.png">
            </div>
            <div class="nav-item-2">
              <h1>Jason Ladieu</h1>
              <h2>Front-End Developer</h2>
            </div>
          </div>
        </nav>
      </header>
      <main>
        <div class="colors-flex-container">
          <ul>
            <li class="square-one"></li>
              <p>#02b3e4</p>
            <li class="square-two"></li>
              <p>#2d3c49</p>
            <li class="square-three"></li>
              <p>#7d97ad</p>
          <ul>
        </div>
        <div class="featured-img-flex">
          <img id="featured-img" src="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/images/Matrix_code.jpg">
        </div>

        <div class="featured-work-flex">
          <h1>Featured Work</h1>
          <div class="feature-one">
            <a href="https://codepen.io/JasonLadieu/pen/qxJddr">
              <h2>Animal Card</h2>
              <img src="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/images/rhino.jpg">
            </a>
          </div>
          <div class="feature-two">
            <a href="https://codepen.io/JasonLadieu/pen/VXRKya">
              <h2>Pixel Art Maker</h2>
              <img src="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/images/Pixelart.png">
            </a>
          </div>
          <div class="feature-three">
            <a>
              <h2>Next Project Slot</h2>
              <img src="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/images/Question_Mark.jpg">
            </a>
          </div>
        </div>
      </main>
    </div>
  </body>
</html

#logo {
  width: 200px;
}

.nav-item-1 {
  width: 25%;
  align-content: left;
}

.nav-item-2 {
  width: 75%;
  text-align: right;
}

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

.colors-flex-container {

  width:20%;
  height: 100%;
  background: red;
  flex-direction: column;
  order: 0;

}

.nav-flex-container {

  height: 40%;
  width: 80%;
  background: blue;
  align-items: center;
  order: 1;
}

.featured-work-flex {
  width: 80%;
  height: 40%;
  order: 2;
  background: green;
}

1 Answer

Richard Pichardo
Richard Pichardo
14,851 Points
Richard Pichardo
Richard Pichardo
14,851 Points

Hey there,

Here's what I worked up for you from the instructions you provided (I unfortunately didn't have access to your images as those were local to your computer so it may not work out exactly right). I added some containers (one for the column and one for the two rows on the right of the column) to the HTML within the parent flex container. You'll also see I made some additions and removals to the CSS to provide the appropriate layout you were aiming for (well hopefully). I hope it helps!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jason's Portfolio Page</title>
    <link rel="stylesheet" href="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/main.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <header>
        <nav>
          <div class="nav-content nav-flex-container">
            <div class="nav-item-1">
              <img id="logo" src="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/images/Udacity_logo.png">
            </div>
            <div class="nav-item-2">
              <h1>Jason Ladieu</h1>
              <h2>Front-End Developer</h2>
            </div>
          </div>
        </nav>
      </header>
      <main>
          <div class="flex-container">
                <div class="colors-flex-container">
                <ul>
                    <li class="square-one"></li>
                    <p>#02b3e4</p>
                    <li class="square-two"></li>
                    <p>#2d3c49</p>
                    <li class="square-three"></li>
                    <p>#7d97ad</p>
                <ul>
                </div>

                <div class="featured-container">
                <div class="featured-img-flex">
                <img id="featured-img" src="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/images/Matrix_code.jpg">
                </div>

                <div class="featured-work-flex">
                <h1>Featured Work</h1>
                <div class="feature-one">
                    <a href="https://codepen.io/JasonLadieu/pen/qxJddr">
                    <h2>Animal Card</h2>
                    <img src="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/images/rhino.jpg">
                    </a>
                </div>
                <div class="feature-two">
                    <a href="https://codepen.io/JasonLadieu/pen/VXRKya">
                    <h2>Pixel Art Maker</h2>
                    <img src="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/images/Pixelart.png">
                    </a>
                </div>
                <div class="feature-three">
                    <a>
                    <h2>Next Project Slot</h2>
                    <img src="/Users/jasonladieu/Dropbox/Udacity/Projects/Portfolio Website/images/Question_Mark.jpg">
                    </a>
                </div>
                </div>
                </div>
            </div>
      </main>
    </div>
  </body>
</html>

* {
    margin: 0;
    padding: 0;
}

#logo {
    width: 200px;
  }

  .nav-item-1 {
    width: 25%;
    align-content: left;
  }

  .nav-item-2 {
    width: 75%;
    text-align: right;
  }

  .flex-container {
      display: flex;
  }

  .colors-flex-container {
    width: 20%;
    background: red;
    order: 0;
  }

  .featured-container {
      width: 80%;
  }

  .featured-img-flex {
      background: pink;
  }

  .nav-flex-container {
    height: 40%;
    background: blue;
    align-items: center;
    order: 1;
  }

  .featured-work-flex {
    order: 2;
    background: green;
    overflow: auto;
  }
Jason Ladieu
Jason Ladieu
10,635 Points

Hi Richard,

That looks better, but the left navigation bar is still not filling in the entire height like I want. Here is what your code looks like with my images. Maybe that will help? I've tried everything and can't figure this out! https://www.dropbox.com/s/6ff2wo63atgok9r/Jason%27s%20Portfolio%20Page%202018-08-28%2006-49-04.png?dl=0

Jason Ladieu
Jason Ladieu
10,635 Points

Maybe this will help. https://codepen.io/JasonLadieu/pen/YOWPvP

Richard Pichardo
Richard Pichardo
14,851 Points

Could you clarify a bit on how you want the left navigation? You say you want it to fill the full height, does this mean you want it to reach the bottom of the page or start at the top of the page instead of right below the blue box or both?