HTML CSS how to put text both right and left aligned in a paragraph

Question

What would be the best code to have two bits of text in a single paragraph  one left aligned  the other right aligned  that also is    the least code as possible the easiest for clients to render  i e  using least resources    I add this last one to be sure  lt table gt  lt tr gt  lt td gt  lt  td gt  lt td align right gt  lt  td gt  lt  tr gt  lt  table gt  would get ruled out  Not only is this a beast of code compared to a couple of properly styled  lt div gt    lt span gt  or  lt p gt  s   it s also a beast if you know what a HTML render engine has to load and calculate to decide on the cell sizes before it even get s to painting text in them     If you re not sure what I mean  here s an example  a page footer with left aligned the name of the user currently logged on  and on the same line right aligned the current date and time and or website version

User · Answer

I wouldn t put it in the same  lt p gt   since IMHO the two infos are semantically too different  If you must  I d suggest this    lt p style  text-align right  gt    lt span style  float left  gt I ll be on the left lt  span gt   I ll be on the right  lt  p gt

User · Answer

Ok what you probably want will be provide to you by result of     in CSS    div         column-count  2        in html    lt div  some text  bla bla bla  lt  div    In CSS you make div to split your paragraph on to column  you can make them 3  4      If you want to have many differend paragraf like that  then put id or class in your div

User · Answer

If the texts has different sizes and they must be underlined this is the solution    lt table gt     lt tr gt       lt td class  left  gt January lt  td gt       lt td class  right  gt 2014 lt  td gt     lt  tr gt   lt  table gt    css   table      width  100       border-bottom  2px solid black        this is the size of the small text s baseline over part     25px 3 4        line-height  19 5px     table td      vertical-align  baseline     left      font-family  Arial      font-size  40px      text-align  left      right      font-size  25px      text-align  right      demo here

User · Answer

I have used this in the past   html  January lt span class  right  gt 2014 lt  span gt    Css   right       margin-left 100       Demonstration

User · Answer

The only half-way proper way to do this is   lt p gt     lt span style  float  right  gt Text on the right lt  span gt     lt span style  float  left  gt Text on the left lt  span gt   lt  p gt     however  this will get you into trouble if the text overflows  If you can  use divs  block level elements  and give them a fixed width    A table  or a number of divs with the according display  table   table-row   table-cell properties  would in fact be the safest solution for this - it will be impossible to break  even if you have lots of difficult content

User · Answer

Least amount of markup possible  you only need one span     lt p gt This text is left   lt span gt This text is right  lt  span gt  lt  p gt    How you want to achieve the left right styles is up to you  but I would recommend an external style on an ID or a class   The full HTML    lt p class  split-para  gt This text is left   lt span gt This text is right  lt  span gt  lt  p gt    And the CSS    split-para        display block margin 10px    split-para span   display block float right width 50  margin-left 10px

[html] HTML/CSS: how to put text both right and left aligned in a paragraph

Examples related to html

Examples related to css