Wrapping text in HTML/CSS: How to put a preformatted text on the right side instead of under?

Allan214rtegren
June 1, 2023
172 views
0 votes
2 Answers

programmers! I am workin on coding an infinate limousine and cant figure it out how do you place the preformatted text (pre) on the left side instead of under in the div "wrapper".

html, body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

.wrapper {
  padding-top: 30vh;
  padding-left: 25vw;
  width: 271px;
  margin: auto;
}

<div class="wrapper">
  <pre>
                             _________
                            /        |
                          /          |
      __________________/()__________|
    {}_________________|___________=_|
   { }      ______     |           . |
 _{ #}_    /##  ##    |             |
{______)__|##    ##|___|_____________|
            ##__##  
</pre>
  <pre class="seat">
_____________________________________________________
                                                    |
                                                    |
____________________________________________________|
__________________________________________________=_|
                                                  . |
                                                    |
____________________________________________________|
</pre>
</div>

I have tried fload:right; but it did not work.

Tags: css html

Answers

Grid is the way to go when it comes to column-based interfaces:

.wrapper {
  display: grid;
  /* Make two columns of equal width */
  grid-template-columns: 1fr 1fr;
}

Try it:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}


/* Original styles */

html, body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

<div class="wrapper">
  <pre>
                             _________
                            /        |
                          /          |
      __________________/()__________|
    {}_________________|___________=_|
   { }      ______     |           . |
 _{ #}_    /##  ##    |             |
{______)__|##    ##|___|_____________|
            ##__##  
</pre>
  <pre class="seat">
_____________________________________________________
                                                    |
                                                    |
____________________________________________________|
__________________________________________________=_|
                                                  . |
                                                    |
____________________________________________________|
</pre>
</div>

You can do so by giving the ".wrapper" class a display: flex; property and setting the padding and margin to your preference.

html, body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

.wrapper {
  display: flex;
  padding-top: 30vh;
  padding-left: 25vw;
  width: 271px;
  margin: auto;
}

<div class="wrapper">
  <pre>
                             _________
                            /        |
                          /          |
      __________________/()__________|
    {}_________________|___________=_|
   { }      ______     |           . |
 _{ #}_    /##  ##    |             |
{______)__|##    ##|___|_____________|
            ##__##  
</pre>
  <pre class="seat">
_____________________________________________________
                                                    |
                                                    |
____________________________________________________|
__________________________________________________=_|
                                                  . |
                                                    |
____________________________________________________|
</pre>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.