Jump to content

Text 1 on the right, Text 2 on the left


Norman
 Share

Recommended Posts

I want do this (in a table):

Text 1										  Text 2

I'm using this code:

.. 		   <td> 			 <div>			 <font style="font-size: 65%; font-family: Verdana; color: #999999;">			 <div align="right"> Copyright © 2006 - 2007, Gg. All rights reserved.  ¥   			 </div> 			 Ricorda di controllare la pagina dei ringraziamenti: <a href="thanksto.html" target="_blank">Thanks To</a>.			 </font>			 </div>			  		   </td>  ..

But it comes like this:

											 Text 2 Text 1

Why?

Link to comment
Share on other sites

Because div's are Block level elements, they carry a "carriage return" with them. Each div tries to start on its own new-line, sort of. To avoid the 'newline', float them left and right as span elements will work because span's are 'in-line' elements which means they do not require the 'carriage return', sort of. Might be able to declare those div's as display:inline, too, not sure.Also, don't "nest" the div's, either, that will complicate things for you. I'll see if I can snag a snippet to show you how I've done it before...

<div  style="background-color: #0099FF; height: 27px; width: 100%; padding-top: 11px;" >		<span style="float: left; margin-left: 10px; " >			  <a href="http://www.trap17.com">Trap17</a> :			  <a href="http://www.astahost.com">AstaHost</a> :			  <a href="http://www.imagefilez.com/">ImageFilez</a> :			  <a href="http://www.qupis.com">Free Web Hosting</a> by			  <a href="http://www.qupis.com">Qupis</a> - a member of -			  <a href="http://www.xisto.com">xisto</a>			  </span>			  <a href="http://www.computinghost.com" style="float: right; margin-right: 10px; " >Affordable Web Hosting</a>			  <a href="http://www.computinghost.com" style="float: right; " >Servers powered by ComputingHost.com - </a>	</div>

the first 'span' is a collection of links floated left as a group and the last two are floated right in the same div. Everything ends up on the same line because spans are 'inline' elements.A working sample can be found here.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...