How do I have separate bits of text in HTML on the same line without them affecting one-another?-CodePudding

I'm wanting to create a mini-website to gain a general grip on how to code in HTML/CSS, and I've decided to make a main box with a sidebar, and when I try to create two separate portions of text on the same line under different tags, it automatically moves down a line and affects the position of the other tag, making the whole (albeit very simple) site look like a mess.

The code which I tried looks like this:

.insidebar{
  float: right;
  margin-right: calc(33.5%);
  position: relative;
}

<ul><a href="https://rateyourmusic.com/~Xerunox">my rym!!</a></ul><p >test</p
```

Note the second piece of text is what I'm trying to move into the sidebar, if that information is needed.

Since my knowledge is quite limited, please try and simplify a lot of the wording.

CodePudding user response：

To be honest, from the description, I'm still not sure I understand what you want to achieve but let me try to give some hints.

ul and p are block elements meaning they will be one above the other, even if in HTML you write them in one line.

Also, using floats to make layouts is an outdated practice. Better read about flexbox.

Also, you're using tag but you actually don't have a list. Why that tag then?

To make a layout with a main box and a sidebar I'd have a container for both of them. In that a div that would be the sidebar and another one that would be the main div.

And the text I want in the main div I would put inside that, and whatever is supposed to be in the sidebar would go inside that div.

CodePudding user response：

I don't know how how your whole layout should look like, but a safe way to achieve a main vs sidebar approach in contemporary HTML/CSS is with the flexbox model:

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  margin: 0;
  display: flex;
  height: 100%;
}

aside {
  width: 200px;
  background-color: dodgerblue;
  padding: 1rem;
}

main {
  flex: 1;
  background-color: orange;
  padding: 1rem;
}

<body>
  <aside>
    <h2>This is the aside section</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </aside>
  <main>
    <h1>This is the main section</h1>
    <p>Welcome to this document</p>
  </main>
</body>

By setting display: flex on the <body>, you are positioning its children next to each other horizontally (being row the default flex-direction).

Inside each body child, elements are arranged vertically (default block model).

Floats are a reminder of the pre-flexbox era, are confusing and should be avoided nowadays.