HTML & CSS column question

[Er]

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

 

[Toby A Inkster]

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>

 

[Leif K-Brooks]

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;
}

 

[Er]

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