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.

If you want block level code rather than inline code you need to wrap the `` tags in `` tags which will preserve the formatting of your code and render it in a block context.. — James Coyle, Jan 27 '20 at 15:22

Oddrigue · Accepted Answer · 2020-01-27T15:37:11.163

2

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.

edited Jan 27 '20 at 15:37

answered Jan 27 '20 at 15:31

Oddrigue

554
5
17

strange, but this also set width for my br texts in another column (I'm using it in a table) – sandrstar Jul 27 '22 at 20:39

score 0 · Answer 2 · answered Jan 27 '20 at 15:23

0

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

answered Jan 27 '20 at 15:23

Gavin Thomas

1,196
6
10

How to make a codeblock with a defined width?

2 Answers2