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

HTML+CSS Sidebar next to centered content

I have a HTML-CSS layout like this:

* {
  box-sizing: border-box;
}

body {
  margin: 5px;
}

#stripe {
  max-width: 200px;
  margin: auto;
  background-color: yellow;
}
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="stripe">
      <main>
      <p>some content</p>
      </main>
    </div>
  </body>
</html>

This gives me a centered stripe for my content.

Now I want to put a table of contents to the right (or maybe also to the left) of this centered stripe. It should be in an absolute/fixed position, with a slight horizontal distance to the centered stripe. The text should expand over the whole right (or left) of the stripe to the border of the body. If the text is longer than that, it should wrap (i.e. make linebreaks).

A good example is here (scroll down a bit). Unfortunately I couldn’t figure out how he does it by inspecting the HTML/CSS.

I have tried for example the following, but the width is wrong so that the text doesn’t break:

* {
  box-sizing: border-box;
}

body {
  margin: 5px;
}

#stripe {
  max-width: 200px;
  margin: auto;
  background-color: yellow;
}

#toc {
  position: absolute;
  top: 0;
  background-color: blue;
}
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="toc">
      <p>this text is so long and it doesn't break which is bad</p>
    </div>
    <div id="stripe">
      <main>
      <p>this</p>
      <p>is</p>
      <p>an</p>
      <p>example</p>
      <p>for</p>
      <p>some</p>
      <p>cool</p>
      <p>content</p>
      </main>
    </div>
  </body>
</html>

If anybody could help me achieve this, that would be amazing! Thank you so much.

Tags:

3

Answers


  1. 0

    I think you can achieve that by using grid. Defining 2 columns one for the aside and another one for the main content. Like this: https://codesandbox.io/s/elegant-moore-4zqccp?file=/index.html

    html:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="styles.css" />
    <title>Static Template</title>
  </head>
  <body>
    <aside>
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
      </ul>
    </aside>
    <main>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
      <p>This is the main content for this webpage</p>
    </main>
  </body>
</html>

    And the CSS:

    body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  min-height: 10vh;
}

aside {
  border: 1px solid red;
  align-self: center;
}

main {
  border: 1px solid red;
}

    I hope this is what you’re looking for.

    Login or Signup to reply.
  2. 0

    Because the question is asking for a lot and doesn’t give an example of what it wants to achieve, I will go based off what examples have been given.

    In html there are different ways to make text break, the most common is probably the <p> element itself. Because the <p> has display: block, it will automatically take all available width unless told otherwise, because of this, if you declare multiple <p> elements, they will all be on different lines, one after the other. More information about display: block and other display values can be found here. Another way to do this, is using the <br> element, or, "break line" element. This element will take all the available width, creating a separation between the elements on the top and bottom, however, because the element is transparent by default, it does not appear that anything is there. More information about this element can be found here. There are probably more ways to do this too, but the final example that I will give, is the one I think you are looking for.

    It appears that you want to make the text break only when the end of the line has been reached. Luckily, there is a css property that you can use, called overflow-wrap. This property tells the browser how to break text when it gets to the end of a line. The default value is normal which does absolutely nothing to the text. The value we want to use is break-word, which, as the name implies, will break the word when it reaches the end of the line. More information about this property and its values can be found here

    Hope this helps!

    Login or Signup to reply.
  3. 0

    Just add a custom variable for the width of centered-div and then width of sidebar will be equal to:

    {(100% – width_center_div) / 2 – gap }

    :root {
  --width: 200px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 5px;
}

#stripe {
  margin: auto;
  width: var(--width);
  background-color: yellow;
}

#toc {
  position: absolute;
  width: calc((100dvw - var(--width))/2 - 1rem);
  top: 0;
  left:0;

  background-color: blue;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search