Text justification issue 1

[bam720]

In my page footer I want to have a copyright, and a Privacy Policy/Terms of Use. I want the Copyright to be justified left, and the PP/TOS right.
this is all nested inside my footer div:

#footer {
width:auto;
height:auto;
margin: 0;
padding-top: 5px;
}

<div style="text-align:left"><a href="#" class="copy u">AspexPOS.Com</a> &copy; 2007 &bull; All rights reserved </div>
	  <div style="text-align:right">Please read our <a href="index-5.html" class="copy u">Privacy Policy</a> and <a href="#" class="copy u">Terms Of Use</a></div>

Now this works, except the new line becuase div is a block (by default). But if I just change div's to spans it just center justifies (beased on other div setting). Im more curious as to why it works with div's and not spans?

 

[bam720]

Also noticed if I set the div to display inline it gets ccenter justified..

 

[BillyRayPreachersSon]

You'd want to use floating... something along these lines:

#footerLeft {
	float: left;
	width: 50%;
}
#footerRight {
	float: right;
	width: 50%;
}

<div id="footer">
	<div id="footerLeft">
		<a href="#" class="copy u">AspexPOS.Com</a> &copy; 2007 &bull; All rights reserved.
	</div>
	<div id="footerRight">
		Please read our <a href="index-5.html" class="copy u">Privacy Policy</a> and <a href="#" class="copy u">Terms Of Use</a>
	</div>
	<span style="clear:both;"></span>
</div>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

bam720,

Did that help? Did you resolve your problem?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bam720]

this is my solution...

#footer {
width:auto;
height:auto;
margin: 0;
padding-top: 5px;
}

.right{
margin: 0 2px 5px 0px;
text-align: right;
height: auto;
width: auto;
}

.left{
margin: 0;
text-align: left;
float: left;
}

<div id="footer" class="clear copy">
  <div class="left"><a href="#" class="copy u">AspexPOS.Com</a> &copy; 2007 &bull; All rights reserved </div>
	  <div class="right">Please read our <a href="index-5.html" class="copy u">Privacy Policy</a> and <a href="#" class="copy u">Terms Of Use</a></div>
</div>
[code]