CODEWITHSUNDEEP
htmlcss
dsax7
dsax7

Reputation: 1343

Align text on the same line without float

I am trying to align text on the same line without using float as it is not supported by the html2pdf converter that I am using.

The code looks as follow:

.text1 {
    padding: 10px 20px 0px 20px;
    text-align: left;
}
.go-right {
    display: inline-block;
    text-align: right;
}
 <div class='text1'>
    Bill to: <span class="go-right">text</span> <br/>
    Amount:  <br/>
    Date: 
 </div>

If I change the display to right, the text is aligned to the right side, however, on a separate line, which is not the wanted outcome.

Upvotes: 0

Views: 1161

Answers (3)

Temani Afif
Temani Afif

Reputation: 274385

You may simply add a fixed width to the span and adjust the value as you need:

.text1 {
    padding: 10px 20px 0px 20px;
    text-align: left;
}
.go-right {
    display: inline-block;
    text-align: right;
    width:calc(100% - 70px); /*Replace with fixed value if calc not supported*/
}
<div class='text1'>
    Bill to: <span class="go-right">text</span> <br/>
    Amount:  <br/>
    Date: 
 </div>

You can also consider padding-left to push the content :

.text1 {
  padding: 10px 20px 0px 20px;
  text-align: left;
}

.go-right {
  display: inline-block;
  text-align: right;
  padding-left: 120px;
}
<div class='text1'>
  Bill to: <span class="go-right">text</span> <br/> Amount: <br/> Date:
</div>

UPDATE

As both method above are not well supported by the converter you may consider a classic table structure like this :

table {
 width:100%;
}
<table>
  <tr>
    <td>Bill to:</td>
    <td>text</td>
  </tr>
  <tr>
    <td>Amount:</td>
    <td></td>
  </tr>
  <tr>
    <td>Date:</td>
    <td></td>
  </tr>
</table>

Upvotes: 1

Subhojit
Subhojit

Reputation: 1541

Check the Jsfiddle link also - https://jsfiddle.net/subhojit/r9x3Ln2o/

CSS:

.text1 {
   padding: 10px 20px 0px 20px;
   text-align: left;
 }
.go-right {
   margin-left: 2%;
   width: 5em;
   text-align: left;
   display: inline-block;
 }
.left-texts {
   width: 3.5em;
   text-align: left;
   display: inline-block;
 }

HTML:

<div class='text1'>
   <span class="left-texts"> Bill to: </span> <span class="go-right">First Text</span> <br/>
   <span class="left-texts"> Amount: </span> <span class="go-right">200</span> <br/>
   <span class="left-texts">Date: </span> <span class="go-right">10-01-2018</span> <br/>
</div>

Upvotes: 0

Xoog
Xoog

Reputation: 926

Additionally, you could set the position to absolute and position your go-right that way. For example

.go-right {
text-align: right;
width:100px;
position: absolute;
top: 20px;
right: 80px;
}

Upvotes: 0

Related Questions