Help wanted for Structuring a page of content

Hi everyone!

I’m having a difficult time making my aside appear on the righthand side of my web page. Please know I am very new to this so I am sure there are some other mistakes too.

I’m not sure what I’m doing wrong, I was able to get the navigation to display right but not the aside.

Any help is greatly appreciated - thank you!

My coding is below:

Birdwatching
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <h1>Birdwatching</h1>
  <img src="dove.png" alt="a simple dove logo">
  <h2>Welcome</h2>

  <p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>

  <p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>

<aside>
  <h2>Favourite photos</h2>

  <a href="favorite-1_th.jpg"><img src="favorite-1_th.jpg" alt="Small black bird, black claws, long black slender beak, links to larger version of the image"></a>
  <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="Top half of a pretty bird with bright blue plumage on neck, light colored beak, blue headdress, links to larger version of the image"></a>
  <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="Top half of a large bird with white plumage, very long curved narrow light colored break, links to larger version of the image"></a>
  <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="Large bird, mostly white plumage with black plumage on back and rear, long straight white beak, links to larger version of the image"></a>
</aside>

  <p>This fake website example is CC0 — any part of this code may be reused in any way you wish. Original example written by Chris Mills, 2016.</p>

  <p><a href="http://game-icons.net/lorc/originals/dove.html">Dove icon</a> by Lorc.</p>

Hi!

Are you ok to put your full code on jsfiddle or codepen?

We can only see the markup in your post, the CSS is missing and we definitly need it to solve your problem :wink:

Hi Frédérique -

Thank you so much for your feedback!

I hope this helps, I included the HTML and corresponding CSS below (please know I don’t know much about CSS yet, but I was hoping the CSS would align the the section to the right). Unfortunately I don’t have collab mode available on CodePen.

HTML:

Actually wait, I have a CodePen link below where I just edited the aside section in HTML for you to view - thanks again! I copied and pasted the CSS from MDN for this lesson

Found it: https://codepen.io/codermom8/pen/eYprJNz

Look in your CSS, you got:

    main {
      display: flex;
    }

Use this main tag in your HTML file to wrap the “welcome” part (h2, two paragraphs) and the aside. When you’re using flex on an element, the parent of the element needs to have the property display: flex (ie. your aside element needs a flex parent).

That should do the trick.

Yay, that worked! Thanks so much =)

1 Like