...

View Full Version : Problem using float right and span or margin



Kevin_M_Schafer
04-30-2011, 03:58 PM
Coders,

I'm trying build a line of words, keeping the first word at the left and throwing the last word to the right.

I can do it easily with two words:

Welcome, Today is<div style="float: right;">About Us</div>

My misunderstanding comes when I add words in between these two.

I tried the following css without the float attribute and it works, but the last word for some reason is always repelled from the right side by about 100 px and wraps to the next line:

div.space span
{
margin: 0 3.5%;
}

<span>Sample Text</span><span>Another Sample</span><span> . . .

What I'm tyring to do is basically justify a line of words, but do it by adjusting the space between the words only -- not the letter space (kerning).

I tried a margin attribute in css, but this is a fixed px setting and will cause trouble between browsers. A complete floating attribute would be ideal, I think. It would always self-adjust in any browser.

Any insight would be appreciated.

AndrewGSW
04-30-2011, 04:09 PM
div.space span
{
margin: 0 3.5%;
}
defines the top and bottom margin as 0 but the left and right as 3.5%.

div.space span
{
margin: 0 0 0 3.5%; /* top right bottom left */
}
CSS also has a word-spacing property you might investigate.

Kevin_M_Schafer
04-30-2011, 04:18 PM
I got this to work, but there has to be an easier way. This just seems like a lot of code to make word justification happen.

HTML:
<div class="navspace">
<font size="2" face="Verdana" color="#3b5998"><b>Welcome, Today is</b></font><div style="float: right;"><a class="nav" href="http://" target="_blank">About Us</a></div>

span><span><a class="nav" href="http://" target="_blank">Write a Letter to the Editor</a></span>
<span><a class="nav" href="http://" target="_blank">Front Page Snaps</a></span>
<span><a class="nav" href="http://" target="_blank">Contact Us</a></span>

CSS:
div.navspace span
{
margin: 0 2.7%;
}

Kevin_M_Schafer
04-30-2011, 04:21 PM
Thanks, AndrewGSW.

I just saw your post. I'll go ahead and look for that word property.

AndrewGSW
04-30-2011, 04:26 PM
the 'font' tag - Aaaaargggh!!! :mad::eek:

explore css text-align:justify and text-justify (css3 - may not yet be supported in many browsers).

I see you ignored my advise about the right margin :p

Added: It also appears that you have not closed your opening 'div' tag (although you may have the closing tag further down). And looks like an extra (un-closed) span tag.

Kevin_M_Schafer
04-30-2011, 04:28 PM
AndrewGSW, I tried the fragment you posted. I got it to work with these attributes:

CSS:
div.navspace span
{
margin: 0 2.5% 0 3%; /* top right bottom left */
}

HTML:
<div class="navspace">
<font size="2" face="Verdana" color="#3b5998"><b>Welcome, Today is</b></font><div style="float: right;"><a class="nav" href="http://" target="_blank">About Us</a></div>
<span><span><a class="nav" href="http://" target="_blank">Write a Letter to the Editor</a></span>
<span><a class="nav" href="http://" target="_blank">Front Page Snaps</a></span>
<span><a class="nav" href="http://" target="_blank">Contact Us</a></span>

Kevin_M_Schafer
04-30-2011, 04:35 PM
AndrewGSW,

I'll get rid of that font tag. I'm a printer by trade. Sometimes I can't help it.:o

I'll get something a little more concrete in the next few minutes or so and post a link to the page.

Thanks for yourhelp. I no sooner learn html and I realize that there's this stuff called css. I start to learn that realize you can build tables with it. Then I find out that tables are old news. Now you tell me that css3 may not be recognized in many browsers. When will the madness end???? :confused:

AndrewGSW
04-30-2011, 04:37 PM
<div class="navspace">
<font size="2" face="Verdana" color="#3b5998"><b>Welcome, Today is</b></font><div style="float: right;"><a class="nav" href="http://" target="_blank">About Us</a></div>
<span><span><a class="nav" href="http://" target="_blank">Write a Letter to the Editor</a></span>
<span><a class="nav" href="http://" target="_blank">Front Page Snaps</a></span>
<span><a class="nav" href="http://" target="_blank">Contact Us</a></span>
Delete the highlighted span unless there is a closing tag further down that you haven't shown.

DON'T USE FONT TAGS

AndrewGSW
04-30-2011, 04:52 PM
Here is some general advice:

a) Try to do all of your styling in a css stylesheet. Preferably an external linked .css file, or at least within a <style> tag within the <head> of your document.
b) Don't use the font tag or any other deprecated (old school) tags.
c) Only use tables for tabulated data - don't use it to for layout, that's what css positioning is for.
d) Never (.. ever :eek:) use nested tables!
e) Indent your code so that, in particular, you can clearly see opening and closing pairs of tags.
f) Validate your HTML using an online validator.
e) Use DIVs to contain blocks/ sections within the page. Use SPANs to control, or perhaps format, in-line content. (This is a general rule of thumb as DIV/SPANs can be modified to behave as either block or in-line elements).
f) Try to keep the level of nesting of elements to a minimum. DIV contains DIV, contains TABLE, etc.. If the css goes wrong it becomes very difficult to trace the cause of the problem.

Kevin_M_Schafer
04-30-2011, 04:59 PM
I do have my site up and running, but in my spare time I'm trying to rebuild it using the correct code.

Here is a link to what I needed help on: http://www.theeagleextra.com/testindex.html

One thing that I just don't understand: there is plent of space between all of these sets of words; however, if I increase the div.navspace span by just a hair more, IE9 blows a word or two onto a second line. FF keeps it there, though. I thought for sure spans and floats would let this line compress and decompress with the different browsers. I guess it's liquid and not air. How do I get air?

How does a person space a simple nav line like this down from the above border by just a few pixels? It's crammed right up to it.

Please don't send the Validation Sheriff here.

Kevin_M_Schafer
04-30-2011, 05:04 PM
AndrewGSW,

If you take a look at my link and check source code, do you think I'm on the right track?

I read your post about an external style sheet. I'll do that right away.

Kevin_M_Schafer
04-30-2011, 05:25 PM
AndrewGSW,

I implimented an external style sheet like you suggested.

I figured out why I had that extra <span> attribute . . . the three groups of words want to center from left to right. With "Welcome, Today is" being longer than "About Us," the space is less on the left side. Is there a way to apply a margin to a space span div to shift the entire group of words to one side to one side?

AndrewGSW
04-30-2011, 05:50 PM
It looks like you are (effectively) trying to create a navigation bar with equally spaced items.

There are a few ways to achieve this, mainly using inline li elements. I recommend that you explore this good Floatutorial (http://css.maxdesign.com.au/floatutorial/tutorial0613.htm). If you decide not to follow their method it will, at least, give you some good pointers for your own approach. Andy.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum