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 6 of 6

Thread: Text columns

  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text columns

    Hey again...


    I want to align some text in my body in 3 columns, it's 3 lists as in :-

    subject 1:-
    1.1
    1.2
    1.3
    1.4

    Subject 2:-
    2.1
    2.2
    2.3
    2.4



    I want (there is 3 subjects) to have them across the page not down, how do I get them to align like that using css? Do I need to create 2 more divs that float to the right of the previous one? Or do I just do align="right" ? Tell me good css techniques to do it!


    cheers


    titaniumbean.
    As far as I can tell you're as guilty as a puppy sitting next to a pile of poo !!

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floating

    Without knowing what sort of markup you used it's guessing, but assuming that you have these lists in some sort of container element each of its own, you could float all three containers left, which should line them up next to eachother in the same order left-to-right as they are top-to-bottom in the source. You do need to make sure that there's sufficient width to fit them all, or else one or more will pop down underneath the other(s) anyway.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ronaldb66
    Without knowing what sort of markup you used it's guessing, but assuming that you have these lists in some sort of container element each of its own, you could float all three containers left, which should line them up next to eachother in the same order left-to-right as they are top-to-bottom in the source. You do need to make sure that there's sufficient width to fit them all, or else one or more will pop down underneath the other(s) anyway.

    ok cool so if they're from the same div, all floated left will line them up. thanks :-)

    So I could create a div called main ul {float:left} and that will line them all up. Thanks.


    titaniumbean.
    As far as I can tell you're as guilty as a puppy sitting next to a pile of poo !!

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    .....
    Last edited by titaniumbean; 08-24-2005 at 12:04 PM.
    As far as I can tell you're as guilty as a puppy sitting next to a pile of poo !!

  • #5
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    As in do this to them all.

    HTML:
    Code:
    <div id="list1">
    <ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    </ol>
    </div>
    <div id="list2">
    <ol>
    <li>two-one</li>
    <li>two-two</li>
    <li>two-three</li>
    </ol>
    </div>
    <div id="list3">
    <ol>
    <li>three-one</li>
    <li>three-two</li>
    <li>three-three</li>
    </ol>
    </div>
    CSS:
    Code:
    #list1 {
    padding: 0px;
    margin: 0px;
    float: left;
    }
    
    #list3 {
    padding: 0px;
    margin: 0px;
    float: left;
    }
    
    #list3 {
    padding: 0px;
    margin: 0px;
    float: left;
    }
    That should give you three columns on top of each other.
    Once I thought I was wrong but I was mistaken.

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is how I would do it -

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <title>Untitled Document</title>
    
    <style type="text/css">
    
    ol {
    padding: 30px;
    float: left;
    }
    
    </style>
    
    </head>
    
    <body>
    <ol id="list1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ol>
    <ol id="list2">
        <li>two-one</li>
        <li>two-two</li>
        <li>two-three</li>
    </ol>
    <ol id="list3">
        <li>three-one</li>
        <li>three-two</li>
        <li>three-three</li>
    </ol>
    </body>
    
    </html>
    By the way how do you get it to do 1.1, 1.2, 1.3, etc? I've forgotten...


  •  

    Posting Permissions

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