4 replies [Last post]
rick_007
Offline
newbie
Last seen: 18 years 1 week ago
Joined: 2004-05-20
Posts: 3
Points: 0

Hi,

I'm having some trouble with getting two text elements aligned left and right on the same line.

The code I'm trying to get to work is :

<style>
#planfooter
{
     border-top: 1px dashed black;
     margin: 0;
     padding: 0 0 0 0;
     height: 1.5em;
     width: 10em;
     background-color: #eee;
}

#planfootertext
{
	text-align: left;    
	display: inline;
	width: 8em;
}

#planfooterlink
{
	background-color: #aaa;
	border-left: 1px dashed black;
	max-width: 2em;
	text-align: right;
	display: inline;
}

#planfooterlink a
{
	text-decoration: none;
	font-weight: bold;
}
</style>         

<div id='planfooter'>
	  <div id='planfootertext'>
  		footer text
  </div>
  <div id='planfooterlink'>
  		<a href=''>go</a>
  </div>
</div>

The two strings appear on the same line but the right element is not
appearing on the right, but up against the left string instead.
Any ideas would be appreciated.

Richard.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 29 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

left/right alignment

Hi

html:

<div id='planfooter'> 
  <div id='planfootertext'> 
        footer text 
  </div> 
  <div id='planfooterlink'> 
        <a href=''>go</a> 
  </div> 
  <div class="clear">&nbsp;</div>
</div>
<div style="clear:both">blah blah</div>

css:

.clear{
  clear:both;
/*** these next attributes are designed to keep the div
height to 0 pixels high, critical for Safari and Netscape 7 ***/
  height:1px;
  overflow:hidden;
  margin-bottom:-1px;
  line-height:1%;
  font-size:0px;
}

* html .clear{height:auto} /*** stops IE browsers from displaying
the clear div/br in the page, as these are for Moz/Opera and
Safari only. If IE 5.x Win DID display these, the page is too high ***/
#planfooter 
{ 
     border-top: 1px dashed black; 
     margin: 0; 
     padding: 0 0 0 0; 
     height: 1.5em; 
     width: 10em; 
     background-color: #eee; 
} 

#planfootertext 
{ 
   ztext-align: left;    
   display: inline; 
   width: 8em;
   float:left; 
} 

#planfooterlink 
{ 
   background-color: #aaa; 
   border-left: 1px dashed black; 
   max-width: 2em; 
   ztext-align: right; 
   zdisplay: inline; 
   float:right;
} 

#planfooterlink a 
{ 
   text-decoration: none; 
   font-weight: bold; 
}

Trevor

rick_007
Offline
newbie
Last seen: 18 years 1 week ago
Joined: 2004-05-20
Posts: 3
Points: 0

left/right alignment

Thanks Trevor,

This works perfectly!

Richard.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 29 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

left/right alignment

Oh

Forgot to mention. I always stick a 'z' in front of style attributes I'm testing to do without, so you need to kill those, if you hadn't worked that out.

Just a handy way of commenting them out that my superb editor then codes purple for me to spot when I'm cleaning up.

Trevor

rick_007
Offline
newbie
Last seen: 18 years 1 week ago
Joined: 2004-05-20
Posts: 3
Points: 0

left/right alignment

Yes, I was a bit confused by those. Thanks for your help