Moving an UL to the right of a page

So my website looks like this right now (I know it’s stupid, it’s just for practice):

I want to move the ‘Related’ menu in the top right corner so that the items all run down the page vertically. The items should be next to the main article text (the two cyan boxes) with no overlapping text.

I tried a lot of different things to get this right but nothing’s worked. My HTML is below. If anyone can help that would be great.


<!DOCTYPE html>
<html style="background-color:rgb(0, 43, 54);", style="max-width: 800px">
  <head>
    <meta charset="utf-8">

    <title>My page title</title>
    <link href="stylingsheet.css" rel="stylesheet" type="text/css">


  </head>


  <body>
    
    <aside id="aside_menu">
        <h2>Related</h2>
        <ul class="navigation_links1">
          <li><a href="https://www.abc.net.au/news/rural/2023-07-05/wheatbelt-winery-produces-shiraz-and-chardonnay/102554796">Oh I do like to be beside the seaside</a></li>
          <li><a href="https://www.tokyometro.jp/en/">Oh I do like to be beside the sea</a></li>
          <li><a href="https://www.surfline.com/surf-report/kounoura/584204204e65fad6a7709850">Although in the North of England</a></li>
          <li><a href="#https://en.wikipedia.org/wiki/Editors_(band)">It never stops raining</a></li>
          <li><a href="https://www.youtube.com/watch?v=iyg5arKOGNQ">Oh well...</a></li>
        </ul>
      </aside>
    </main>

    
    <header id="header_colour_font">
      <h1 class="header_footer_background_colour">Header</h1>
    </header>
  
    <nav>
      <ul class="navigation_links2">
        <li><a href="https://www.youtube.com/watch?v=oteyFLVSVB8">Home</a></li>
        <li><a href="https://shimanami-cycle.or.jp/cycling/en-02.html">Our team</a></li>
        <li><a href="https://www.carsguide.com.au/buy-a-car/all-new/sa/adelaide/all-bodytypes/all-makes">Projects</a></li>
        <li><a href="https://www.jimmydean.com/recipes/?gclid=Cj0KCQjwho-lBhC_ARIsAMpgMofhIlF9V4G7RT2KNgHpVM5mTyqpCj2GAWO-V4MuMgabPxjh4J-Dmq0aAsaeEALw_wcB&gclsrc=aw.ds">Contact</a></li>
      </ul>

       <!-- A Search form is another common non-linear way to navigate through a website. -->

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value∫="Go!">
       </form>
     </nav>

    
  
    

    <main>

      <!-- It contains an article -->

    
      <article>
        <div id="text_colour"> 
        <h2 class="headings_group">Article heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

<div id="box1">
        <h3 class="headings_group">Subsection</h3>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
      </div>

      <div id="box2">
        <h3 class="headings_group">Another subsection</h3>

        <p lang="la">Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        
        <p lang="la">Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>

      </div> 

    
      </article>


      
     
    
<div class="header_footer_background_colour">
    <footer id="text_colour">
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>
  </div>

  </body>
</html>

My suggestion would to be to use CodePen or something similar to that.

Here’s some that I did awhile back → https://codepen.io/Strider64/pen/gOGqrxo

It uses grids useful if you want to change things around and I think it might also use flex. Anyways, feel free to fork it or create your own. I use CodePen when I am coming up with a new website as it is kind of my mockup of it. Just a suggestion and my opinion.

1 Like

Hi @williamfranklinus — As @Pepster64, it would be good to provide a link to some working code. this is a CSS issue, and you haven’t really posted any, so it’s hard to help with this. :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.