Is it possible for me to have text on two different sides of the same line within an element? On a single line in my element, I want to have a link to a comments page on the left side while having a link to awards on the right side - all on the same line and with spaces in between the left and right sides of the line.
This is the current code that I'm using to try and make this work:
<div>
<span style="text-align:left;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Comment</a> on this vid!</span>
<span style="text-align:right;">View <a href=http://www.webdeveloper.com/forum/archive/index.php/"awards.html">Awards</a></span>
</div>
It looks ok to me but it's not working. It just puts both phrases right next to each other and aligns them on the left side.
So is this possible? Can I have two different text alignments on the same line? Is there any way for me to do this? Thanks in advance.Try this:
CSS:
span.right{
float: right;
}
span.left{
float: left;
}
HTML:
<div>
<span class="left"> LEFT </span> <span class="right"> RIGHT </span>
</div>
I tried using text align but it doesn't work, and if you only float "RIGHT" to the right it would be higher then "LEFT" so I tried floating both. Maybe someone can come up with something better.Thanks for your suggestion but it's not really working because, for some reason, the float right is making some picture elements outside of the <div> tag also go to the right (in firefox only; on ie it seems to do the trick). This is a tough one.Try adding position:relative; to the containing divTried it and still no luck. Don't the elements already assume "position:relative;" be default anyway? Any other ideas? Should I just give up on it?This is all guess work without seeing the code. Try clear:both; in thr containing div.This is all guess work without seeing the code.
Yeah, sorry about that. Here is the link to my site:
<!-- m --><a class="postlink" href="http://www.freewebs.com/madhousevids/">http://www.freewebs.com/madhousevids/</a><!-- m -->
Just look down to the "My December" section and at the end of the paragraph you'll find the line that I'm looking for that has "comment on this vid!" on the left side and "Awards" on the left side (but i want it on the right side). The "award" link isn't working right now because I don't have the page up.
Oh and I tried the "clear:both;" line with no luck. Thanks for all of your help BTW.Since your content is not fluid why not just add some non breaking space ( )? Or even better just give your left span
<span class="left"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.livejournal.com/community/vidding/265602.html">Comment</a> on this vid!</span>
some margin-right: Xpx?try this:
<html>
<head>
<title>Untitled</title>
<style>
#left {
display: block;
float: left;
text-align: left;
width: 50%;
}
#right {
display: block;
float: left;
text-align: right;
width: 50%;
}
</style>
</head>
<body>
<div>
<span id="left">Left</span> <span id="right">Right</span>
</div>
</body>
</html>Since your content is not fluid why not just add some non breaking space ( )? Or even better just give your left span
<span class="left"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.livejournal.com/community/vidding/265602.html">Comment</a> on this vid!</span>
some margin-right: Xpx?
The problem with leaving spaces or putting margins is that if a browser changes the text size than it will no longer be perfectly formatted. I want it so that even with a text size change the link will still be aligned perfectly to the right.
try this:
<html>
<head>
<title>Untitled</title>
<style>
#left {
display: block;
float: left;
text-align: left;
width: 50%;
}
#right {
display: block;
float: left;
text-align: right;
width: 50%;
}
</style>
</head>
<body>
<div>
<span id="left">Left</span> <span id="right">Right</span>
</div>
</body>
</html>
I get the same problem here as I did with previous float commands. For some reason I can't understand, whenever I float that line of text to the right, the bottom Download link pictures go WAY to the right (in Firefox) - all the way outside of my box area. I'm seriously stumped.Maybe use a table with 2 cells to get 2 text align? =/First off, what you're trying to do is div not span. Something like this is closer to what you need. (span with display:block == div)
<div>
<div style="width:45%;float:left"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Comment</a> on this vid!</div>
<div style="width:45%;float:right;text-align:right">View <a href=http://www.webdeveloper.com/forum/archive/index.php/"awards.html">Awards</a></div>
<div style="clear:both"></div> <!-- may be unneeded -->
</div>
Also you're using <div>s where you ought to be using <p>s, causing you to have to use superfluous <br>s. Bottom line is I like the look of your page but I think you'd be a lot better off if your markup made sense.Ok, I finally got it to work!
I basically used the code offered earlier by Lone Reaction:
Try this:
CSS:
span.right{
float: right;
}
span.left{
float: left;
}
HTML:
<div>
<span class="left"> LEFT </span> <span class="right"> RIGHT </span>
</div>
The problem that I had with the link below floating too far right was fixed by placing a <br /> tag right before the bottom link tag starts. Now it looks perfect in IE and FF.
Check it out now:
<!-- m --><a class="postlink" href="http://www.freewebs.com/madhousevids">http://www.freewebs.com/madhousevids</a><!-- m -->
Oh, and BTW Ray326, how are <br>s superflous? I find no other way to give me the blank spaces I need.
Thanks again for everyone's help.Oh, and BTW Ray326, how are <br>s superflous? I find no other way to give me the blank spaces I need. That's what margins and padding are for but you need to start with meaningful HTML.
This is the current code that I'm using to try and make this work:
<div>
<span style="text-align:left;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Comment</a> on this vid!</span>
<span style="text-align:right;">View <a href=http://www.webdeveloper.com/forum/archive/index.php/"awards.html">Awards</a></span>
</div>
It looks ok to me but it's not working. It just puts both phrases right next to each other and aligns them on the left side.
So is this possible? Can I have two different text alignments on the same line? Is there any way for me to do this? Thanks in advance.Try this:
CSS:
span.right{
float: right;
}
span.left{
float: left;
}
HTML:
<div>
<span class="left"> LEFT </span> <span class="right"> RIGHT </span>
</div>
I tried using text align but it doesn't work, and if you only float "RIGHT" to the right it would be higher then "LEFT" so I tried floating both. Maybe someone can come up with something better.Thanks for your suggestion but it's not really working because, for some reason, the float right is making some picture elements outside of the <div> tag also go to the right (in firefox only; on ie it seems to do the trick). This is a tough one.Try adding position:relative; to the containing divTried it and still no luck. Don't the elements already assume "position:relative;" be default anyway? Any other ideas? Should I just give up on it?This is all guess work without seeing the code. Try clear:both; in thr containing div.This is all guess work without seeing the code.
Yeah, sorry about that. Here is the link to my site:
<!-- m --><a class="postlink" href="http://www.freewebs.com/madhousevids/">http://www.freewebs.com/madhousevids/</a><!-- m -->
Just look down to the "My December" section and at the end of the paragraph you'll find the line that I'm looking for that has "comment on this vid!" on the left side and "Awards" on the left side (but i want it on the right side). The "award" link isn't working right now because I don't have the page up.
Oh and I tried the "clear:both;" line with no luck. Thanks for all of your help BTW.Since your content is not fluid why not just add some non breaking space ( )? Or even better just give your left span
<span class="left"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.livejournal.com/community/vidding/265602.html">Comment</a> on this vid!</span>
some margin-right: Xpx?try this:
<html>
<head>
<title>Untitled</title>
<style>
#left {
display: block;
float: left;
text-align: left;
width: 50%;
}
#right {
display: block;
float: left;
text-align: right;
width: 50%;
}
</style>
</head>
<body>
<div>
<span id="left">Left</span> <span id="right">Right</span>
</div>
</body>
</html>Since your content is not fluid why not just add some non breaking space ( )? Or even better just give your left span
<span class="left"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.livejournal.com/community/vidding/265602.html">Comment</a> on this vid!</span>
some margin-right: Xpx?
The problem with leaving spaces or putting margins is that if a browser changes the text size than it will no longer be perfectly formatted. I want it so that even with a text size change the link will still be aligned perfectly to the right.
try this:
<html>
<head>
<title>Untitled</title>
<style>
#left {
display: block;
float: left;
text-align: left;
width: 50%;
}
#right {
display: block;
float: left;
text-align: right;
width: 50%;
}
</style>
</head>
<body>
<div>
<span id="left">Left</span> <span id="right">Right</span>
</div>
</body>
</html>
I get the same problem here as I did with previous float commands. For some reason I can't understand, whenever I float that line of text to the right, the bottom Download link pictures go WAY to the right (in Firefox) - all the way outside of my box area. I'm seriously stumped.Maybe use a table with 2 cells to get 2 text align? =/First off, what you're trying to do is div not span. Something like this is closer to what you need. (span with display:block == div)
<div>
<div style="width:45%;float:left"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Comment</a> on this vid!</div>
<div style="width:45%;float:right;text-align:right">View <a href=http://www.webdeveloper.com/forum/archive/index.php/"awards.html">Awards</a></div>
<div style="clear:both"></div> <!-- may be unneeded -->
</div>
Also you're using <div>s where you ought to be using <p>s, causing you to have to use superfluous <br>s. Bottom line is I like the look of your page but I think you'd be a lot better off if your markup made sense.Ok, I finally got it to work!
I basically used the code offered earlier by Lone Reaction:
Try this:
CSS:
span.right{
float: right;
}
span.left{
float: left;
}
HTML:
<div>
<span class="left"> LEFT </span> <span class="right"> RIGHT </span>
</div>
The problem that I had with the link below floating too far right was fixed by placing a <br /> tag right before the bottom link tag starts. Now it looks perfect in IE and FF.
Check it out now:
<!-- m --><a class="postlink" href="http://www.freewebs.com/madhousevids">http://www.freewebs.com/madhousevids</a><!-- m -->
Oh, and BTW Ray326, how are <br>s superflous? I find no other way to give me the blank spaces I need.
Thanks again for everyone's help.Oh, and BTW Ray326, how are <br>s superflous? I find no other way to give me the blank spaces I need. That's what margins and padding are for but you need to start with meaningful HTML.