Question 180209 in Html Question posted in
Some basic documentation can be found here.

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

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:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search