SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    aligning two sets of text in opposite directions

    Okay this is really getting the best of me and I can't believe how stupidly difficult this is turning out to be. If any of you use GMail you'll notice that when you log in there are links at the top of the page linking to Mail, Calendar etc. Then on the right you will see another set of links "floated" right??? I don't know. Because when I try to do that I get the second set of links being pushed down no matter what I do.

    In a table design it would so very very simple...two <td> tags one with right alignment. But this "easier" more "simple" way of doing it is anything but. Please for the life of me won't someone explain to me why I can't simply align a second set of links.

    I would greatly appreciate it. Man do I feel like a complete idiot so please be nice...

  2. #2
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Man do I feel like a complete idiot so please be nice...
    No! I desagree. Floats are hard to play with. There a lot of 'stranges' behaviors with floated elements.

    Play with the following code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
    <head>
    <title>Página testes</title>
    <meta name="author" content="Mauricio Samy Silva" />
    <style type="text/css">
    #links {width:100%}
    p.side-1 {width:49.9%;float:left;}
    p.side-2 {width:49.9;float:right;}
    </style>
    </head>
    <body>
    <div id="links">
    <p class="side-1"><a href="#">[link1 - left]</a> <a href="#">[link2 - left]</a> <a href="#">[link3 - left]</a> <a href="#">[link4 - left]</a>
    <p class="side-2"><a href="#">[link1 - right]</a> <a href="#">[link2 - right]</a> <a href="#">[link3 - right]</a> <a href="#">[link4 - right]</a>
    </div>
    </div>
    </body>
    </html>
    But be aware! Any margins, paddings, etc added and floats suddenly appear to de alive . They love to jump.

    On the code above set 50% for the width of .side-1 and .side-2 and IE that doesn't learn sum think that 50% + 50% != 100% ( This is the reason i had have set 49.9%). Always set widths for floats and their container.
    And there are others misterious bugs with floats.

    Search on Google for articles explaining the floats issues and bugs.
    Hope that help.
    Mauricio Samy Silva
    http://www.maujor.com/

  3. #3
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The common method is to float the first box to the left, and the second one to the right. Make sure you give the boxes less than 50% width, and even less if you use padding and margins (you must leave enough room for both boxes (width + padding + borders + margins) to be placed next to one another if you dont want the second one to drop bellow).

    If you want that the container of those boxes encloses its child floats, you should float the container as well

    edited: too slow

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This couldn't be simpler and you only need to float the first item left and use text-align:right to position the second inline element.

    e.g.

    http://www.pmob.co.uk/temp/leftandright.htm

    Quote Originally Posted by Mauricio
    Always set widths for floats
    This is not necessary anymore unless you want to support older browers such as ie5 mac. Floats will shrinkwrap their content in the same way that absolute elements do and is very useful in certain situations. However floats without widths will expand to 100% should their content dictate and take up the whole line. Widthless floats are ideal for short amounts of variable length text (or images).

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone...I appreciate the help.


Bookmarks

Posting Permissions

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