Thu, 2004-05-20 12:17
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.
Thu, 2004-05-20 12:41
#1
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"> </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
Thu, 2004-05-20 12:49
#2
left/right alignment
Thanks Trevor,
This works perfectly!
Richard.
Thu, 2004-05-20 13:31
#3
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
Thu, 2004-05-20 13:51
#4
left/right alignment
Yes, I was a bit confused by those. Thanks for your help