What's the cleanest implementation of this text arrangement in CSS+HTML?

Question

I'm trying to discover a clean way of implementing this text arrangement (INCLUDING the two curly braces) in CSS, but I'm curious if there is already a best practice for doing so. Is three divs the only way to accomplish this?

Answer 1

There are a few ways you could achieve the text arrangement, you can write this text either in a <p> tag like so:

<p>
  line 1 <br/>
  line 2 <br/>
  line 3 <br/>
  line 4 <br/>
  line 5 <br/>
</p>

Or you could write it as a list like so:

<ul>
  <li>line 1</li>
  <li>line 2</li>
  <li>line 3</li>
  <li>line 4</li>
  <li>line 5</li>
</ul>

If you decide to use the list HTML, you may need to declare the following CSS:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Here is a link to a working fiddle.

Both the above methods are good practise and at the end of the day it is up to you and which method you prefer.

Updated Answer

Here is an updated fiddle to achieve what you want, the best way is to have 4 divs, here is the HTML:

<div class="block">
  <div class="block__bg-1"></div>
  <div class="block__module">
    <h2>List</h2>
    <ul>
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
      <li>line 5</li>
    </ul>
  </div>
  <div class="block__bg-2"></div>
</div>

The reason for so many divs is because the block__module--bg divs are holding background images for the curly braces and the block and block__module divs are being used to vertically align the content using display: table display:table-cell and vertical-align:middle method.

Here is the CSS:

.block {
  display:table;
  height:400px;
}

.block__module {
  display:table-cell;
  vertical-align:middle;
}

.block__bg-1,
.block__bg-2 {
  height:400px;
  width:50px;
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/GullBraceLeft.svg/2000px-GullBraceLeft.svg.png") no-repeat center;
  background-size:contain;
}

.block__bg-2 {
  transform: scaleX(-1);
}