SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    0 Post(s)
    0 Thread(s)

    Combining fluid and fixed width type in one column?

    Let's say I have a 3-column layout where the middle column has a fixed width while the left and right columns occupy the rest of the page.

    Before going into detail, let me summarize... I'd like my middle column to be a percent width so it grows with the browser window. But as soon as its width reaches X pixels, it'll stay like that.

    Currently, the fixed width middle column includes an control that displays images. If the middle column is 800-1000px, then it forces the control to display 3 images per row. If 1200px or greater, 4 images. If 800px or less, 2 images/row. I set it with javascript.

    Here's the "problem": Let's say a user opens a browser window in a normal size (not maximized) at 900px, then it will display 3 images, which is correct. But when he maximizes the window to 1440px, it'll still display 3 images when it should be 4 images/row. If he makes the window smaller (to 700px). It'll still be displaying 3 images when it should be 2. Here I want to add a % width.

    On the other hand it can't be completely float because if a user has one of those huge screens with 2000+px, then it'll show all the images in one row. And I don't want that either.

    I hope my explanation makes sense.

    Thanks for the help.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    448 Post(s)
    8 Thread(s)
    You can set max-width and min-width on the column. Is that what you are after?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    50 Post(s)
    2 Thread(s)
    Yeah but how to have columns on each side always fill the remaining side space? Something like ErikJ's "float: center" code still wouldn't really get wrapping working correctly.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Yorkshire, UK
    122 Post(s)
    1 Thread(s)
    My preference would be to set a max-width on the whole page, so that at the point where you don't want the central column to grow any more, the outer columns will stop growing as well. Otherwise (a) it's more difficult to code, and (b) you might otherwise end up with a design that looks out of kilter at large screen sizes, where the sidebars become wider than the main column.

Tags for this Thread


Posting Permissions

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