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.7k 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.