www.webdeveloper.com
Results 1 to 2 of 2

Thread: 2 Columns

  1. #1
    Join Date
    Apr 2005
    Location
    Behind my DiGiCo SD7 Console
    Posts
    900

    2 Columns

    Hi in CSS

    How do you make a box with 2 colmuns (divided)

    Thanks
    Registered Linux User: #463250
    -----------------
    HELPFUL LINKS
    PHP - http://www.php.net
    Website Color Schemer - http://www.colorschemer.com/online.html

  2. #2
    Join Date
    Jul 2004
    Location
    Rhode Island
    Posts
    190
    There are a few things you might try.

    One method is to create a container box <div>, and make each column a <div> inside it, with the CSS float property set for each, and width set to 50%. Example:

    HTML Code:
    <div id="container">
       <div style="width:50%;float:left;">
          This is the left column.
       </div>
       <div style="width:50%;float:right;">
          This is the right column.
       </div>
    </div>
    It might help if you set position: relative; for the container box, just to take care of any possible display issues (will only fix things, not break them).

    Another would be the same concept, but absolutely positioning the columns (more reliable than float). Of course, this works best if you know the width of your container. Some browsers *cough cough*IE*cough* may not handle this properly, though I haven't tried it so I don't know.

    HTML Code:
    <div id="container>
       <div style="width:50%;position:absolute;left:0px;">
          This is the left column.
       </div>
       <div style="width:50%;position:absolute;right:0px;">
          This is the right column.
       </div>
    </div>
    Two issues: a) you will need to set some sort of positioning for the container, relative will probably work fine; b) this removes the columns from the page flow, so if there was going to be anything below the container, that will not display correctly. Most likely, it will appear under the columns. Only use the second one if the columns are the whole page, or the last thing on the page.

    Hope it helps!

    -Matt
    Last edited by patenaudemat; 07-01-2006 at 01:11 PM.
    Matt Pat
    The World's Best Web Browser (Windows, Linux, and Mac): Get Firefox!
    My website: http://www.mattpat.net
    Control iTunes Remotely: TuneConnect

    "What's accepted is not always what's right."
    Look it up: What's the longest word in the English language?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles