My code's not working!

×

  1. Double check all your files are saved.
  2. Check each quote has a pair.
  3. Do all of your HTML tags have a closing tag?
  4. Ask a mentor for help!

Fix Layout

Our site looks pretty great right now, but there’s one more thing we can do to make it even better. Let’s make our aside and main tag sit next to each other. Using CSS, there’s a couple ways we can do this. The approach we’re going to take is using floats.

In your profile.html file, let’s add a div tag that wraps around both the aside tag and the main tag.

  <div class="container">
    <aside>
      <!-- your sidebar code -->
    </aside>
    <main>
      <!-- your main code -->
    </main>
  </div>

If you’re confused as to where to put this tag, don’t be afraid to ask a mentor to help you make sure your opening and closing div tag is in the right place.

Let’s open styles.css

  .container {
    overflow: hidden;
    background-color: #466C88;
  }

To your main CSS block, we’re going to add a width property and a float property. Add to your CSS until the main is styled like:

main {
  background-color: #F6CE30;
  width: 72%;
  float: left;
}

Amazing. The last piece of our layout puzzle is to add a float and width property to our aside CSS.

  aside {
  background-color: #466C88;
  width: 20%;
  float: left;
}

Note: If you chose some custom colors, be sure you don’t overwrite them.

Okay, let’s save profile.html and styles.css, and refresh the page.

floats example

Woo! You’ve done it. Look at those beautiful floating HTML elements.