SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot JEmLAC's Avatar
    Join Date
    Apr 2002
    Location
    Kansas City
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    left/right justify on the same line?

    I have what I hope is a simple question. I'm laying out a page which will have collapsible elements on it (like a tree). What I'd like to to is have the ability at each level to have a text element that aligns right and goes with a node on the tree. I'll see if I can code an example:

    Code:
    + Element1                        ___Text1___
    - Element2
        + Element2A                   ___Text2A___
    - Element3
        + Element3A                   ___Text3A___
        - Element3B
            - Element3B-1             ___Text3B-1___
    + Element4                        ___Text4___
    The rule would be that the Text elements will be the same width and correspond either with a collapsed Tree element or with the lowest level tree element. I think I can figure that part out. What's getting me, is how to to the part that has, on the same line, one part that aligns left and another that aligns right. What I've seen has had to do with using a p tag or a div tag with the align attribute set to left or right. This puts a hard return between the tagged bits, though. I tried with span tags, but no luck.

    I think the next step might be to try to do it with tables, but that makes the code to build the collapsible tree a lot more complicated, and I'm not even sure I can do it without it turning into an disgusting mess. What would be great would be to have some way to tell part of a line to go left and another to go right. Any ideas? Thanks!

    B
    Morning person by habit, not by nature.

  2. #2
    Weird Little Girl Desdelena's Avatar
    Join Date
    May 2002
    Location
    Canada
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You had the right idea when you were using the <div> tags. You just need a little more. Change the display of your <div> in your stylesheet so that it is "inline". I think that should fix the problem.

    Code:
    <style type="text/css">
    div {display: inline;}
    </style>

  3. #3
    SitePoint Zealot JEmLAC's Avatar
    Join Date
    Apr 2002
    Location
    Kansas City
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I think I'm almost there. I put the style tag in the header and got the divs to stop inserting hard returns. They still don't want to "part ways" tho'

    Here's what I have:
    Code:
    <html>
    <head>
    	<title>Untitled</title>
    <style type="text/css">
    div {display: inline;}
    </style>
    </head>
    
    <body style="width:6in;">
    
    <div style="text-align:left;">Here is a bit.</div> <div style="text-align:right;">Here is another bit.</div>
    
    </body>
    </html>
    The divs still sit side by each on the same line. I tried it with the div's align attribute with the same result. I would think a 6 in page width should be sufficient. I tried a wider page, but no luck.

    B
    Morning person by habit, not by nature.

  4. #4
    SitePoint Zealot JEmLAC's Avatar
    Join Date
    Apr 2002
    Location
    Kansas City
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Me again.

    Ok, I got it working, but I had to resort to a single row/single column table to maintain the "page width" regardless of window resizing.
    Code:
    <html>
    <head>
    	<title>Untitled</title>
    <style type="text/css">
    div {display: inline;}
    </style>
    </head>
    
    <body>
    <table style="width:10in;">
    <tr>
    <td>
    <div style="width:3in;text-align: left;">Here is a bit.</div><div style="width:3in;text-align: right;">Here is another bit.</div>
    </td>
    </tr>
    </table>
    </body>
    </html>
    I tried fiddling with the style attribute of the body tag, setting width there, but it didn't seem to like that. If you have any ideas, I'm all ears!

    Thanks for your help
    Morning person by habit, not by nature.

  5. #5
    SitePoint Zealot JEmLAC's Avatar
    Join Date
    Apr 2002
    Location
    Kansas City
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, last one.

    I can do the same thing by nesting the divs within a div and setting its style attribute's width to whatever I need, rather than having to use a table.

    Of course if the browser doesn't like CSS, this is all for naught.
    Morning person by habit, not by nature.


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
  •