Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

I have tried display: inline-block any which way I can find, but always starts the one column and the end of the next column.
I already tried with flex-box but it doesn’t work either. Not even if I literally copy stuff from the internet that does work on other sites.

codepen for view:

the .block class is empty in css at this moment but I also tried the display: inside-block; without any difference.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css" />
    <title>HyperText Markup Language</title>
  </head>
  <body>
    <span class="heading">
      <h1>HyperText Markup Language</h1>
    </span>
    <span class="left bottom">
      <a href="#doctype">doctype</a>
    </span>
    <span class="right bottom">
      <main id="main-doc">
        <section class="main-section" id="doctype">
          <header>DOCTYPE</header>
          <p>The <code>&lt;!DOCTYPE html&gt;</code> declaration is used at the beginning of an HTML document to specify the document type and version of HTML being used. It informs the web browser about the standards to expect when rendering the page.</p>
          <ul>
            <li><b>Version Declaration:</b> In HTML5, &lt;!DOCTYPE html&gt; is a simple declaration that tells the browser to render the document in standards mode.</li>
            <li><b>Compatibility:</b> Using the correct DOCTYPE helps ensure consistent rendering across different browsers.</li>
            <li><b>No Closing Tag:</b> The DOCTYPE is not a HTML tag and does not have a closing tag. It should be the very first line in your HTML document.</li>
        </section>
        <section class="main-section" id="html">
          <header>HTML</header>
        </section>
        <section class="main-section" id="head">
          <header>HEAD</head>
        </section>
        <section class="main-section" id="body">
          <header>BODY</header>
        </section>
        <section class="main-section" id="title">
          <header>TITLE</header>
        </section>
        <section class="main-section" id="meta">
          <header>META</header>
        </section>
      </main>
    </span>
  </body>
</html>

/* file: styles.css */
.heading {
  text-align: center;
  background-color: #D3D3D3;
  display: block;

}
.bottom {
}
.left {
  width: 20%;
  height: 400px;
  border: 1px solid black;
  display: inline-block;
 
  background-color: yellow;
}
.right {
  height: 400px;
  width: 75%;
  border: 1px solid black;
  display: inline-block;

}
code {
  background-color: #D3D3D3;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

in the meantime I found a solution with vertical-align: top.
So weird that I have to search for something for hours. I than ask a question, and 5 minutes later, I find an answer myself.

1 Like