Super simple span positioning

liunx

Guest
I'll file this one under a brain fart.

<div width="100%">
<span>Text on the far left of div</span>
<span>Text on the far right of div</span>
</div>

Not the actual code, but just the idea. I used float and the right side text went to the right, but not up on the same level as the text on the left. I tried positioning the right side (absolute and relative), and it wasn't working either.:confused:

What's your question?Within the div, I want the text in the first span to be placed on the far left. It's there by default, so that's easy. I want the second span, to be placed to the far right of the div.You need to float both spans - the first to the left and the second to the right.

<div style="border: 1px solid;">
<span style="float: left;">Text on the far left of div</span>
<span style="float: right;">Text on the far right of div</span>
&nbsp;
</div>And the answer to the follow up question is clear:both; :)Yep, I almost threw that in there, but wasn't sure what you needed. For one line of text, it would not have been needed. :)Originally posted by spufi
And the answer to the follow up question is clear:both; :)

For those of us who are telepathically challenged; what's the follow-up question?I had a paragraph that is supposed to be placed below the <div> tag, but since I was using float in both cases, the paragraph was being placed in between the two <span> tags. This should show what I mean.

<div style="border: 1px solid;">
<span style="float: left;">Text on the far left of div</span>
<span style="float: right;">Text on the far right of div</span>
</div>
<p>Text that is supposed to be below the text of the span tags, but isn't.</p>

Change the <p> tag to this <p style="clear:both;"> and it works for how I want it."I see," said the blind man.

Related question: If you used <p style="clear:none;"> would you be right back in the same boat?Originally posted by Aronya1
Related question: If you used <p style="clear:none;"> would you be right back in the same boat? Yes.First possible answer to my own question is that I'm testing with NS v4.7.

<div style="border: 1px solid;">
<span style="float: left;">Text on the far left of div</span>
<span style="float: right;">Text on the far right of div</span>
</div>
The code above displays a nice little div on the left side of the browser window with a 1px border, AND NOTHING ON THE RIGHT.

In IE v6.0, it displays the text properly, but with a heavy line across the page directly above the text. Looks like it might be the border around an empty div.

Any ideas?Very little CSS does work in NN 4.x...

As for the answer to your second question, see my post (<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&postid=129382#post128543">http://forums.webdeveloper.com/showthre ... post128543</a><!-- m -->) above. If you float both spans, you will need to add something do the <div> to make it render (hence the &nbsp;)Once again I prostrate myself at the feet of the master.:p Happy to help, buddy...
 
Back
Top