How to make a codeblock with a defined width?

Question

I'm trying to add a code block to a documentation website I'm making, but I can't make the block have a defined width. Its width is only tied to the text that's inside of it.

I want the block to have a set width and that the text simply falls in place within it, rather than having the code block restricted by the size of the text.

* {
  width: 1265px;
  font-family: 'Roboto', sans-serif;
}

body {
  display: inline-block;
}

main {
  margin: auto;
}

.centerContent {
  width: 75%;
  margin: auto;
  float: right;
}

.sidebar {
  width: 25%;
  margin-top: 10px;
  float: left;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

code {
  width: 600px;
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
}

<header>
  <h1>Batch Documentation</h1>
</header>
<main class="clearfix">
  <div class="sidebar">
    <ul>
      <li>Test</li>
      <li>Test2</li>
      <li>Test3</li>
    </ul>
  </div>
  <div class="centerContent">
    <h2>Sample text</h2>
    <code>Hello</code>
  </div>
</main>

funny enough: I'd like the code block to look like the code blocks in this site. Not talking about color but about their size.

Answer 1

The <code> element in HTML is by default an inline element and you cannot define a width, nor a height to an inline element.

The solution here is as simple as adding

display: block

in your element CSS for the following result

code {
  width: 600px;
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
  display: block;
}

For more information about inline and width, you can read this question

Also, as James Coyle pointed out, if you want to keep your code formatting instead of having it inline, you need to wrap the <code> tags in <pre> tags.