15

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 <table><tr><td></td><td align=right></td></tr></table> would get ruled out. Not only is this a beast of code compared to a couple of properly styled <div>, <span> or <p>'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.

2
  • 1
    instead of caring about some microseconds used for rendering wouldn't it be better to come up with nice, semantically corect markup to support text-browsers, screenreaders and a possible better search-engine-rating?
    – oezi
    Oct 27, 2010 at 11:55
  • not instead, I think it's both important, so it would be nice also that left and right appear in HTML code in the same sequence. Oct 30, 2010 at 21:42

6 Answers 6

29

Least amount of markup possible (you only need one span):

<p>This text is left. <span>This text is right.</span></p>

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:

<p class="split-para">This text is left. <span>This text is right.</span></p>

And the CSS:

.split-para      { display:block;margin:10px;}
.split-para span { display:block;float:right;width:50%;margin-left:10px;}
3
  • that's odd, a <span> and force it into display:block, why not use <div><div>? (hihi: en.wikipedia.org/wiki/Divi-divi ) Oct 30, 2010 at 21:39
  • 7
    Because this is semantic. You want to split a paragraph, so I suggest using a paragraph element. You can't put a block element like a div inside a paragraph, as that would be invalid. So, <p><span></span></p> is the best markup.
    – Stephen
    Oct 30, 2010 at 23:43
  • Actually, now that I paid ATTENTION I see that you're not actually splitting a paragraph! So a div would be better!
    – Stephen
    Oct 30, 2010 at 23:50
7

The only half-way proper way to do this is

<p>
  <span style="float: right">Text on the right</span>
  <span style="float: left">Text on the left</span>
</p> 

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.

0
5

I wouldn't put it in the same <p>, since IMHO the two infos are semantically too different. If you must, I'd suggest this:

<p style="text-align:right">
 <span style="float:left">I'll be on the left</span>
 I'll be on the right
</p>
1
  • Exactly. They're not the same paragraph.
    – user207421
    Oct 27, 2010 at 11:55
1

enter image description here

If the texts has different sizes and they must be underlined this is the solution:

<table>
  <tr>
    <td class='left'>January</td>
    <td class='right'>2014</td>
  </tr>
</table>

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

2
  • I specifically do not want <table>, also the <p>L<span>R</span></p> solution also allows me to apply a different font size. Mar 26, 2014 at 18:29
  • @StijnSanders Can you achieve with that solution different font sizes on the same baseline?
    – user669677
    Mar 27, 2014 at 10:37
1

I have used this in the past:

html

January<span class="right">2014</span>

Css

.right {
    margin-left:100%;
}

Demonstration

0

Ok what you probably want will be provide to you by result of:

  1. in CSS:

    div { column-count: 2; }

  2. in html:

    <div> some text, bla bla bla </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:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.