Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts

    Problem using float right and span or margin

    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.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    div.space span
    {
    margin: 0 3.5%;
    }
    defines the top and bottom margin as 0 but the left and right as 3.5%.
    Code:
    div.space span
    {
    margin: 0 0 0 3.5%;   /* top right bottom left */
    }
    CSS also has a word-spacing property you might investigate.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Kevin_M_Schafer (04-30-2011)

  • #3
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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%;
    }

  • #4
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Thanks, AndrewGSW.

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

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    the 'font' tag - Aaaaargggh!!!

    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

    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.
    Last edited by AndrewGSW; 04-30-2011 at 04:29 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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>

  • #7
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    AndrewGSW,

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

    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????

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    <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
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts

    Web Page guidelines

    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 ) 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.
    Last edited by AndrewGSW; 04-30-2011 at 04:54 PM. Reason: Added f)
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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.

  • #11
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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.

  • #12
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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?

  • #13
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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. If you decide not to follow their method it will, at least, give you some good pointers for your own approach. Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Kevin_M_Schafer (04-30-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •