I have 2 separate fields I need to display within two different 'pre' tags. I need to display them vertically like:
But instead they display like:
1. First Song
2. Second Song
Jingle Bells Jingle Bells
Jingle all the way We wish you a Merry Christmas
Oh what fun it is to ride We wish you a Merry Christmas
In a one horse open sleigh We wish you a Merry Christmas
and a Happy New Year!
Here is the HTML I use (the values within the pre actually come from a database source)
<!DOCTYPE html>
<html>
<head>
<style>
pre {
display: block;
white-space: pre-wrap;
margin: 1em 0;
}
</style>
</head>
<body>
<p>My pre-formatted data should display vertically:</p>
<div style="float:left; display:block;">
<label>1. First Song</label>
<pre>
Jingle Bells Jingle Bells
Jingle all the way
Oh what fun it is to ride
In a one horse open sleigh
</pre><br/>
</div>
<div style="float:left; "> </div>
<br/>
<div style="float:left;">
<label>2. Second Song</label>
<br/>
<pre>
We wish you a Merry Christmas
We wish you a Merry Christmas
We wish you a Merry Christmas
and a Happy New Year!
</pre>
</div>
<div style="float:left; "> </div>
</body>
</html>
You don't need any floats whatsoever, also make sure to delete the white-space inside the pre elements to make sure the song titles line up with the headers. Add some padding to the pre elements to ensure everything is line-up. Adding white-space: pre-line to the pre elements will delete the white-space, as well.
pre {
padding-left: 16px;
white-space: pre-line;
}
div {
margin-bottom: 26px;
}<p>My pre-formatted data should display vertically:</p>
<div>
<label>1. First Song</label>
<pre>
Jingle Bells Jingle Bells
Jingle all the way
Oh what fun it is to ride
In a one horse open sleigh
</pre>
</div>
<div>
<label>2. Second Song</label>
<pre>
We wish you a Merry Christmas
We wish you a Merry Christmas
We wish you a Merry Christmas
and a Happy New Year!
</pre>
</div>