15

How to align one word left and another word right within the same div?

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
Jigs
  • 401
  • 1
  • 4
  • 15

5 Answers5

21

Solution 1:

HTML:

<div>
    <div class="left">left text</div>
    <div class="right">right text</div>
</div>

CSS:

.left {
    float: left;
}
.right {
    float: right;
}

Solution 2:

HTML:

<div>
    <div class="left">left text</div><!-- no space here
 --><div class="right">right text</div>
</div>

CSS:

.left {
    text-align: left;
}
.right {
    text-align: right;
}
.left, .right {
    display: inline-block;
    width: 50%;
}
Eric
  • 95,302
  • 53
  • 242
  • 374
  • This is exactly what I would do and it's probably the best way to do it. – Zwik May 26 '10 at 17:01
  • No, this doesn't work. Did you try it? For starters, you have two .left selectors. But even when you change them to .left and .right it fails. – Robusto May 26 '10 at 17:01
  • Or it would have been if my copy-paste finger hadn't intruded. Fixed now. – Eric May 26 '10 at 17:01
  • 1
    Maybe I misunderstood the question. I thought he was wanting the words left- and right-aligned on the same baseline. If he just wants them aligned left and right on different lines he could simply stack divs with no floats at all and alternately set their text-align properties to left and right. – Robusto May 26 '10 at 17:04
  • No, I just made another mistake. Fixed now. Hopefully. – Eric May 26 '10 at 17:06
  • Now it will. In Chrome at least. – Eric May 26 '10 at 17:07
  • 1
    In fact, solution 2 [works for long sections of text](http://www.jsfiddle.net/xkFbc/). – Eric May 26 '10 at 17:08
  • If the combined width of .left and .right is longer then the one of the parent div, yes they will be displayed on different line. If the width is actually equal or shorter, they will be both displayed on the same line. Eric's solution2 use the inline-block which bypass the point I just mentioned and will simply display them INLINE. – Zwik May 26 '10 at 17:42
  • Making both div's width equal to 50% (as you did (Robusto)) would also do the trick since it would make sure that their additions isn't longer than the parent's width. – Zwik May 26 '10 at 17:49
  • @Eric: Any reason to use div inside of the parent div instead of span? – Dean J May 27 '10 at 14:28
  • @Dean J: Any reason to do it the other way around? – Eric May 27 '10 at 16:43
  • You don't need the bit if the parent div has white-space: nowrap; set – Bob Davies Jun 30 '12 at 04:22
  • @BobDavies: Yes you do. The space has a width. Therefore, with the space present, the total width of the children becomes 100% + the width of the space. Even if you prevent it wrapping, it's still the wrong width. – Eric Jun 30 '12 at 11:36
  • @Eric a single space has a width, so yes he should not add a space there, but other whitespace (tabs/newlines) *shouldn't* render a width. – Bob Davies Jun 30 '12 at 11:40
  • I've tried to format code by adding tabs and a newline between those two divs and Chrome renders them in different lines. It seems that any whitespace (space, tab and newline) needs to be escaped with comment. – wilkas Apr 10 '13 at 07:04
2
<html>
<head>
<style type="text/css">
  div span.left, div span.right { display:  inline-block; width: 50%; }

  span.left { float: left; }

  span.right {float: right; text-align: right; }
</style>
</head>
<body>
  <div>
    <span class=left>Left Text</span>
    <span class=right>Right Text</span>
  </div>
</body>
g.d.d.c
  • 46,865
  • 9
  • 101
  • 111
  • I would use a more specific selector for the span, otherwise you could mess things up for any additional css. `div span.left, div span.right { display: inline-block; width: 50%; }` – ghoppe May 26 '10 at 17:11
2

Here's what I would do:

    .left {
        text-align: left;
        float: left;
        clear: none;
        width: 50%;
    }
    .right {
        text-align: right;
        float: right;
        clear: none;
        width: 50%;
    }


<div>
    <div class="right">right text</div>
    <div class="left">left text</div>
</div>

And make sure to put the one that appears on the right FIRST in the markup, as above.

Robusto
  • 31,447
  • 8
  • 56
  • 77
  • If you clear both on both words, the second appears bellow the first - which would be useless, one might as well use two divs with text-align. – ANeves May 27 '10 at 14:50
  • @ANeves: Good catch. I meant to type `clear:none`, but my fingers typed `clear:both`. My fingers are stupid sometimes. Fixed in text of response. Thanks. – Robusto May 27 '10 at 15:35
2

Try this:

.left {
      float: left;
}
.right {
       float:right;
}       
<html>
<head>
</head>
<body>
<div class="left">
<p>Lorem ipsum dolor.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor</p>
</div>
</body>
</html>
CM8
  • 21
  • 1
0

Without modifying the html as seen above you can possibly use pseudo-selectors, those these are limited to first-line, first-child, etc. http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors.

Aside from that you would need to use javascript to apply formatting to the text after it has rendered. Take a look at this stack-overflow post.

CSS to increase size of first word

Community
  • 1
  • 1
Schneems
  • 14,918
  • 9
  • 57
  • 84