I think the title says it all, how to align one word left and another word right within the same div?
views:
179answers:
4
A:
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.
http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word
ThinkBohemian
2010-05-26 16:51:31
+4
A:
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
2010-05-26 16:56:36
This is exactly what I would do and it's probably the best way to do it.
Zwik
2010-05-26 17:01:00
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
2010-05-26 17:01:31
Or it would have been if my copy-paste finger hadn't intruded. Fixed now.
Eric
2010-05-26 17:01:54
It does now, doesn't it?
Eric
2010-05-26 17:02:09
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
2010-05-26 17:04:46
No, I just made another mistake. Fixed now. Hopefully.
Eric
2010-05-26 17:06:00
Now it will. In Chrome at least.
Eric
2010-05-26 17:07:17
In fact, solution 2 [works for long sections of text](http://www.jsfiddle.net/xkFbc/).
Eric
2010-05-26 17:08:33
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
2010-05-26 17:42:41
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
2010-05-26 17:49:03
@Eric: Any reason to use div inside of the parent div instead of span?
Dean J
2010-05-27 14:28:56
@Dean J: Any reason to do it the other way around?
Eric
2010-05-27 16:43:31
+2
A:
<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
2010-05-26 16:59:07
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
2010-05-26 17:11:06
+2
A:
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
2010-05-26 17:09:05
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
2010-05-27 14:50:05
@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
2010-05-27 15:35:50