SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to place 3 div's next to eachother

    This is an easy one, what's the simplest way to take 3 div's and put them next to eachother, like a 3-cell 1-row table would be? Not sure which method is cleanest and doesn't disturb the rest of the page. Floating them all, relative positioning with top: and left:, or increasing margins as you move right?

    HTML Code:
    <div id="container">
      <div id="left">content</div>
      <div id="middle">content</div>
      <div id="right">content</div>
    </div>

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd say depend on whether or not your site will be fluid or static. For a static site, margins, relative position would all work, and they'd probably work better than float because it offers more precision.

    However, if your site is fluid, then obviously floats will be your ultimate solution, whether you want all three columns fluid or only one fluid. Another plus for being fluid with float is, since you mentioned not to disturb the rest of the page, there is the handy clearfix that can allow you to modify the content below anyway you like.

    EDIT: nonetheless, static or not, you should always float two columns and then relative or margin the other div or also float the third.
    Last edited by kefeso; Aug 2, 2006 at 11:50.
    In search of the clouds...and maybe some work

  3. #3
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Right now I'm planning on a static width site. "container" would be of a certain size and therefore I can specify sizes for "left" "middle" and "right".

    If I were to position them with "relative", would that be relative to their container? So I'd have equal "top" values but increasing "left" values?

  4. #4
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually no, the position: relative only means in relation to where the element would occur normally, thus, it would not be relative to their container.

    For your need, first you would want to think over and make sure the widths of the columns. It would actually work to float all three columns left, or you could choose to float one left and float another one right then leave the middle space for the main content and then relative position it.

    As for the 'equal top value', what I would say is your #container div will help this out, each nested div within your container div will be right up against the top of the container div. And your container div should be nested within your main wrapper.

    For some 3 columns layout example, you can try paul's site http://www.pmob.co.uk/temp/3colfixedtest_4.htm
    In search of the clouds...and maybe some work


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
  •