SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Full width site? Lots of products to sell

    I've noticed most websites use static layouts for 1024 pixel resolution.
    Designers seem to think if people have a full HD monitor theres no point in using extra space.

    Any comments on layout width?

    Amazon has a really great system.
    You can resize your browser window, and it automatically re-tiles the display area with products to fit.
    What technology are they using for moving the DIVs around?
    This might be a bit too fancy for me right now. I might just detect browser resolution when the page loads and align stuff at that point in time.

  2. #2
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you put each of your items in a div with specified widths and float all the divs to the left, they will automatically move up to fill the space when you resize.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    A very simple way is to use floats or inline-block (although floats can get messy when the items aren't all the same height. See http://gybo.org.uk/photos for a very simple example of a page where the items flow and fill the available space. No, you can't do anything too sophisticated, but for a simple way of filling the page efficiently, it's a good place to start.
    Last edited by Stevie D; Apr 9, 2012 at 16:42. Reason: Re-read the question (d'oh!)

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Generally best practices (from what I know) are to make what's called a responsive web design meaning, basically, that the website will respond to what the user is using (in your case, screen resolution). This is most commonly done w/ the use of a fluid grid or fluid site.

    For Amazon, as Stevie and WebMachine noticed, the site was made w/ floats (or at least, it seems to be).

    ~TehYoyo


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
  •