0 votes
by (220 points)


I'm trying to have a single line in a header with text on the left and on the right. I have tried 

<div align="left">This is on the left</div><div align="right">This is on the right</div>

Which correctly aligns the text on the left and right, but the right text moves down as pictured below. Is there anyway to have it all line up horizontally?

Picture here

I am using tweego and Sugarcube 2.27

1 Answer

+2 votes
by (44.1k points)

For what you want, the "float" property does the trick:

<div style="float: left">This is on the left</div><div style="float: right">This is on the right</div><div style="clear: both;"></div>

The <div> at the end makes sure nothing ends up between those two floats.

For details see "All About Floats".

by (220 points)
Awesome, that's exactly how I wanted it to work. Thanks HiEv.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.