Question 201394 in Html Question posted in
Some basic documentation can be found here.

Html – How to do move an unordered list of links to the right side of the page beside other elements?

So I’m trying to create something similar to the attached image:

enter image description here

Basically I have an unordered list of links and I want it to run down the right side of the page to the right of the article main text. Float:right moves it to the right side of the page on the bottom but not next to the main article text. Absolute aligns it to the top but then the text overlaps with the main article. Basically, I want the menu on the right running down the page with no overlapping text.

Tags:

2

Answers


  1. 0

    just use inline-block or use flexbox

    div,ul{
display:inline-block;}
    <div>
some text
</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
    Login or Signup to reply.
  2. 0

    Put the left and right side contents into 2 different containers and then put those 2 containers into a single container and give the display of this parent container to flex. It will do it.

    And you can also add align-items: flex-start to verticallly align them at the top. Like this:

    <div class="parent-container" style="display: flex; align-items: flex-start;">
    <div>left content</div>
    <div>right content</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search