Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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;
  }

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

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?