HTML & CSS column question

Discussion in 'HTML' started by Er, Dec 1, 2003.

  1. Er

    Er Guest

    Hi all,

    I am writing a PHP catalog of products type script, and I need to list a
    whole bunch of products on each page.

    I would like to have the number of columns to be dynamic, that is, if you
    have a narrow browser window, you end up with two columns and if you are
    maximized, for example, you have four or five columns of products.

    Can this be done automatically (ie. change the number of columns on a
    resize-browser window) or do I have to see how wide the browser window is on
    load-up, and keep refreshing the page?

    I tried doing it with tables but they always seem to want to stay on the
    same line just adding a horizontal scroll bar to the browser window.

    Thanks,

    Erwin



    Narrow:

    -------- --------
    | pic | | pic |
    | | | |
    -------- --------
    Prod 1 Prod 2

    -------- --------
    | pic | | pic |
    | | | |
    -------- --------
    Prod 3 Prod 4


    Wide:


    -------- -------- -------- --------
    | pic | | pic | | pic | | pic |
    | | | | | | | |
    -------- -------- -------- --------
    Prod 1 Prod 2 Prod 3 Prod 4
     
    Er, Dec 1, 2003
    #1
    1. Advertising

  2. Er wrote:

    > I would like to have the number of columns to be dynamic, that is, if you
    > have a narrow browser window, you end up with two columns and if you are
    > maximized, for example, you have four or five columns of products.


    <style type="text/css" media="screen,projection">
    #productlist {
    margin: 0;
    padding: 0;
    list-style: none;
    border: thin dotted black;
    }
    #productlist li {
    margin: 1em;
    padding: 1em;
    list-style: none;
    border: thin dotted blue;
    width: 180px;
    float: left;
    }
    #productlist li p {
    font-size: 85%;
    }
    </style>

    <ul id="productlist">
    <li>
    <h3>Product One</h3>
    <img src="product1.png" alt="" height="100" width="100">
    <p>Short description of product one.</p>
    </li>
    <li>
    <h3>Product Two</h3>
    <img src="product2.png" alt="" height="100" width="100">
    <p>Short description of product two.</p>
    </li>
    <li>etc</li>
    </ul>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Dec 1, 2003
    #2
    1. Advertising

  3. Er wrote:
    > I am writing a PHP catalog of products type script, and I need to list a
    > whole bunch of products on each page.
    >
    > I would like to have the number of columns to be dynamic, that is, if you
    > have a narrow browser window, you end up with two columns and if you are
    > maximized, for example, you have four or five columns of products.
    >
    > Can this be done automatically (ie. change the number of columns on a
    > resize-browser window) or do I have to see how wide the browser window is on
    > load-up, and keep refreshing the page?
    >
    > I tried doing it with tables but they always seem to want to stay on the
    > same line just adding a horizontal scroll bar to the browser window.



    Try using the CSS float property:

    <div class="product">
    <img src="product1.png" alt="">
    <p class="caption">Product 1</p>
    </div>
    <div class="product">
    <img src="product2.png" alt="">
    <p class="caption">Product 2</p>
    </div>
    <div class="product">
    <img src="product1.png" alt="">
    <p class="caption">Product 2</p>
    </div>
    <div class="product">
    <img src="product1.png" alt="">
    <p class="caption">Product 2</p>
    </div>
    <div class="product">
    <img src="product1.png" alt="">
    <p class="caption">Product 2</p>
    </div>

    And style them like:

    ..product {
    float : left;
    width : 100px; /* Or whatever the width of the images is */
    }
    ..caption {
    text-align : center;
    }
     
    Leif K-Brooks, Dec 1, 2003
    #3
  4. Er

    Er Guest

    "Leif K-Brooks" <> wrote in message
    news:eQNyb.342$...
    > Er wrote:
    > > I am writing a PHP catalog of products type script, and I need to list a
    > > whole bunch of products on each page.
    > >
    > > I would like to have the number of columns to be dynamic, that is, if

    you
    > > have a narrow browser window, you end up with two columns and if you are
    > > maximized, for example, you have four or five columns of products.
    > >
    > > Can this be done automatically (ie. change the number of columns on a
    > > resize-browser window) or do I have to see how wide the browser window

    is on
    > > load-up, and keep refreshing the page?
    > >
    > > I tried doing it with tables but they always seem to want to stay on the
    > > same line just adding a horizontal scroll bar to the browser window.

    >
    >
    > Try using the CSS float property:
    >
    > <div class="product">
    > <img src="product1.png" alt="">
    > <p class="caption">Product 1</p>
    > </div>
    > <div class="product">
    > <img src="product2.png" alt="">
    > <p class="caption">Product 2</p>
    > </div>
    > <div class="product">
    > <img src="product1.png" alt="">
    > <p class="caption">Product 2</p>
    > </div>
    > <div class="product">
    > <img src="product1.png" alt="">
    > <p class="caption">Product 2</p>
    > </div>
    > <div class="product">
    > <img src="product1.png" alt="">
    > <p class="caption">Product 2</p>
    > </div>
    >
    > And style them like:
    >
    > .product {
    > float : left;
    > width : 100px; /* Or whatever the width of the images is */
    > }
    > .caption {
    > text-align : center;
    > }
    >


    This works great! Thanks!

    Er
     
    Er, Dec 2, 2003
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    749
    clintonG
    Dec 24, 2004
  2. Titus A Ducksass - AKA broken-record
    Replies:
    6
    Views:
    670
    Titus A Ducksass - AKA broken-record
    Nov 15, 2004
  3. Replies:
    6
    Views:
    565
    Jonathan N. Little
    Mar 18, 2006
  4. AF
    Replies:
    17
    Views:
    617
    Nije Nego
    Aug 9, 2006
  5. richard
    Replies:
    12
    Views:
    774
    dorayme
    Mar 9, 2010
Loading...

Share This Page