SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    maine
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    4 columns & a footer?

    Howdy.
    I've figured out how to have a 3 column layout and a footer using float, clear, and margins (all %'s), but I can't get it to work for 4 columns. Any advice?
    And, a separate question for extra credit, I'd love it if, when resized smaller, all the elements would order themselves into one neat column...
    The help is much appreciated.
    Thanks.

  2. #2
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Next time, just click on 'edit' to avoid double posting. ;-)

    ~~Ian

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    maine
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Weird. It kept telling me there was an error in my submission and it wouldn't accept until I registered...
    Anyway, do you have any advice for my problem?
    thanks...

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Floating works for 4 column layouts, just float all the columns.

    For automatic resizing, you might be able to get what you want using min-width and width, but I doubt it. You'll need a JS fix for IE if you want min-width to work cross browser.

    Douglas
    Hello World

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    maine
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I tried floating Column 3 to the right of the main content, and it seemed to work, but it screws up all my percentages. I figure its a stupid math error, but haven't been able to see it yet...
    Any specifics?
    Thanks for your help.

  6. #6
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    div { float: left; width: 25%; margin-left: -1px;  }
    HTML Code:
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
    <div>Fourth</div>
    That's the easiest way to do it.

    Douglas
    Hello World

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    maine
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Its working now. As an additional note, I found that it works better with a width of 24% on Opera, Netscape, and Safari.
    Thanks for the help!


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
  •