Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Member dandono_'s Avatar
    Join Date
    Mar 2006
    Location
    Cornwall, UK
    Posts
    30
    Member #
    12919
    Hi, i would like to know of a way of having multiple colums on one line. Do I have to use tables or can I use several <div> tags. I would like to be able to have something aligned to the left and another on the same line aligned to center and so on.
    thanks, dandono.
    mmm beef

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Sure ...

    A structure like this (as many lines as you need)...

    <div class='line'>
    <div class='left'>left</div>
    <div class='center'>center</div>
    <div class='right'>right</div>
    </div>

    <div class='line'>
    <div class='left'>left</div>
    <div class='center'>center</div>
    <div class='right'>right</div>
    </div>

    .
    .
    .

    ... then, your CSS style sheet would have those
    four classes defined with the properties you need.
    There are so many possibilities, you'll need to create
    something and get back to us with questions.
    Give us a link to your test site too.


  4. #3
    Member dandono_'s Avatar
    Join Date
    Mar 2006
    Location
    Cornwall, UK
    Posts
    30
    Member #
    12919
    ok, when i use that code i get a left aligned <div> on one line, a center aligned one on the next line and right aligned on that next. I am after getting them all on one line. is there something in css that needs to be changed to do this?
    thanks, dandono
    mmm beef

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    You need to add, float: left;
    to each of them (but not to "line")

    You didn't say whether you have a separate
    CSS file or have the style sheet defined in the
    same page. It's hard without a seeing your site,
    as you've not provided a link.


  6. #5
    Member dandono_'s Avatar
    Join Date
    Mar 2006
    Location
    Cornwall, UK
    Posts
    30
    Member #
    12919
    so i could use
    HTML Code:
    <div><div style="float:left;"></div><div style="float:right;"></div></div>
    so how do i have one in between them center aligned?
    mmm beef

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Put the style definitions in your <head> section like
    this example. And I had to add a property to the line class.

    Code:
    <html>
    <head>
    <style>
    .line{
    clear: both;
    }
    .left{
    width: 30%;
    float: left;
    text-align: center;
    }
    .center{
    width: 30%;
    float: left;
    text-align: center;
    }
    .right{
    width: 30%;
    float: left;
    text-align: center;
    }
    </style>
    </head>
    <body>
    
    <div class='line'>
    <div class='left'>left</div>
    <div class='center'>center</div>
    <div class='right'>right</div>
    </div>
    
    <div class='line'>
    <div class='left'>left</div>
    <div class='center'>center</div>
    <div class='right'>right</div>
    </div>
    
    </body>
    </html>


  8. #7
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    What is it that you're trying to do? Would an unorganized list suit this? The <ul> acts as a container for ever <li>.
    Shani

    I have an eye for detail like you'd never believe.

  9. #8
    Member dandono_'s Avatar
    Join Date
    Mar 2006
    Location
    Cornwall, UK
    Posts
    30
    Member #
    12919
    im making message board software and trying to get forum name on the left, latest post in the middle and total threads on the right. i don't know if <ul> will do it but im too tierd to code (no coke) so i try in the morning or maybe when i wake up in the evening
    mmm beef


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:12 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com