PDA

View Full Version : How to align to the right and left in same div?

kippie
07-09-2003, 03:37 PM
In the HTML below I have two lines of text in the same div. I try try to get one line aligned to the left and the other to the right, but apparently I do something wrong. Can someone help?

This is the HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css"><!--
#layer { position: absolute; top: 50px; left: 50px; width: 500px; height: 100px; visibility: visible }
.left { color: #ffae06; font: 10px/10px Arial}
.right { color: #ffae06; font: 10px/10px Arial; text-align: right }-->
</style>
</head>

<body>
<div id="layer"><span class="left">This should be aligned on the left</span><br>
<span class="right">This should be aligned on the right</span>
</div>
</body>
</html>

Kippie
Spookster
07-09-2003, 04:14 PM
<style>
.rightit{
float:right;
}
</style>

<div style="border:1px solid black; padding: 3px">
<span class="rightit">Right aligned text</span>
Left aligned text
</div>
ronaldb66
07-09-2003, 04:15 PM
I should check against the specs, but I'd say text-align should only be assigned to block-level elements, which span is not. Aligning text in an inline element seems pointless.
Try p elements instead of spans, or something like that.

Update:

Checked: yup, only block-level.
meow
07-10-2003, 04:10 AM
Any floated element automatically and magically is transformed to block so me thinks it's OK. :p
ronaldb66
07-10-2003, 10:06 AM
Yeah, I guess, but my response was to the original question; Spookster got his post in just before I submitted mine.