SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Tables Next To Each Other?

    Hi guys,

    I want to put two CSS tables next to each other (with a space in between), but don't know how to do it without using HTML tables - which I don't want to use.

    Could someone tell me how to do it please?

    Cheers,
    Mike

  2. #2
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS tables??? Do you just mean 2 div's next to each other?

  3. #3
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep But with a little space in between them!

  4. #4
    What a twist! Kings's Avatar
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    954
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What a coincidence! I was just about to ask the same question, 'till I found this thread.

    I want to know how to do this as well. At the moment the divs are under each other, instead of next other.
    Dennis Pallett - NoCertainty - My Personal Weblog
    The Web Network: ASPit | PHPit | WebDev-Articles
    Blogs: TalkFones | Holidayzer | PHPit Blog

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

    There are various ways of positioning divs next to each other but it does depend on what and how you want to use them.

    You could just absolutely position them next to each other exactly where you want but this is not usually the best way.

    If you float the divs next to each other then they will align next to each other and reflow if the window is resized. You can put space between them by using the margin property e.g margin-right:20px.

    Heres a short example that may be of use:
    Code:
    <style type="text/css" media="screen">
    .div1 {
     color: #000000;
     background-color: #CCCCCC;
     margin: 2px;
     height: 300px;
     width: 300px;
     float: left;
    }
    </style>
    
     
    & then in the body:
     
    <div class="div1">
    <p>Hello this is a floated div </p>
    </div>
    <div class="div1">
    <p>Hello this is a floated div </p>
    </div>
    Note that the shorthand property margin puts the margin on all sides. If you want a margin just on one side use margin-left: 20px or margin-right:20px etc.

    As I said above it all depends on what you want to achieve as to the best method but I hope this is of some use.

    Paul

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Paul's correct; floating is the way to go.

  7. #7
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul

  8. #8
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a quick follow-up on the margin shorthand property. It actually let's you specify different values for each side:
    margin: 0px 20px 0px 20px

    the order they come in is top, right, bottom, left

  9. #9
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I wanted to have two floating divs with different attributes how would I do that? div1 and div2? And would they both float left? Just getting oriented in the finer points of CSS.

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

    All you need to do is set up another class (or id) with your different attributes and float them left similar to the first example above.
    Code:
    <style type="text/css" media="screen">
    .div1 {
    color: #000000;
    background-color: #CCCCCC;
    margin: 2px;
    height: 300px;
    width: 300px;
    float: left;
    }
    .div2 {
    color: #FF0000;
    background-color: #FFFFCC;
    margin: 2px;
    height: 100px;
    width: 200px;
    float: left;
    }
    </style>
    
    & then in the body:
    
    
    <div class="div1">
    <p>Hello this is a floated div 1</p>
    </div>
    <div class="div2">
    <p>Hello this is a floated div 2</p>
    </div>
    The divs will float left in the order that they come in the code. i.e. Div1 will float to the left first and then div 2 will float next to it as long as the window is wide enough to accomodate it.

    If the second div is too wide or the window has been resized to small to accomodate it then the second div will float under the first one on the left hand side.

    A left float will always try and float to the left as far as it can and as high as it can depending on other content. (Float right has of course the reverse actions. The float will be moved to one side or the other of the parent elements content area.)

    It's also best to have a specified width on the float otherwise the results can be unpredictable in different borowsers.

    Hope that makes sense.

    Paul

  11. #11
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Makes perfect sense . . . in theory at least. I'll bookmark this thread and give it a try when I have a chance.

    As to the specified width. Is it possible to set one exact width and leave the other one open? I often do this with tables to make the site structured yet flexible.

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

    You could set the width in % to give you some movement etc but if you select auto you will find that ie and Mozilla behave differently.

    Try playing around with it and you will soon learn what works and what doesn't but remember to check in different browsers as you go.

    Paul

  13. #13
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    Does float just position it right to the left/right of the page? How can you specify how far away it is from the side etc please?

    Cheers,
    Mike

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

    Just use the margin property to move the float away from other elements.

    You can set the top, right, bottom and left margins.

    ie. margin-left:20px will ensure that the float is 20px away from anything on its left. margin-right:20px will ensure that no content to the right of the element will be within 20px. Thus placing a margin-right:20px on one element and then a margin:left:10px on the next floated element will mean that the elements will be 30px apart.

    Floated elements also do not collapse their vertical margins (margin:top or margin:bottom) as other non positioned elements do (but that's another story).

    Paul

  15. #15
    Wishful Thinking webmasternovis's Avatar
    Join Date
    Jul 2002
    Location
    England
    Posts
    430
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I get it, cheers mate


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
  •