So I want to make a website with the main part centered. I also want to make a screen-wide bar with the (newest) shop's products. The products will be positioned next to eachother and there will be as much as possible regarding the width.

 

So I could make a system that tells the server to load just as much product-images as would fit, but that would be rather complex. So I thought I'd just load an obviously too large amount (like, thirty) of images, and then let the screen borders cut the overplus of 'em.

 

Sorry for my possibly bad English in explaining this . Here's an image to illustrate what I want to achieve:

 

 

Note that the products shown on the left of the main part, should be aligned right, to the side of the main part, and for the products on the right of the main part, vice versa. (the products ON the main part will always be the same amount and these won't be a problem).

 

Does anyone has a good concept on this? Thanks in advance!

try

 

<style>
div#wrap{width:1960px; margin:0 auto; position:relative;}
div#left{width:500px; position:absolute; left:0 top:0;}
div#centre{width:960px;position:absolute; left:500px; top:0;} 
div#right{width:500px; position:absolute; left:0 top:0;}
</style>



<div id="wrap">
 <div id="left"></div>
 <div id="centre"></div>
 <div id="right"></div>
</div>

Use Div tags. dont get confused between Divs and AP Divs though. Use Divs and CSS to make your webpage align properly.

It's solved with something like this:

 

<style>
body{text-align:centre;}
div#left{width:50%; position:relative; float:right;}
div#centre{width:700px;position:relative; margin:0 auto; height: auto;text-align:left; z-index:1;} 
div#right{width:50%; position:relative; float:left;}
.fakeproduct{width:350px;color:transparent;}
.product{width:140px;}
</style>


<div id="left">
 <div class="fakeproduct"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>  
 <div class="product"></div>
etc.
</div>
<div id="centre">
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
</div>
<div id="right">
 <div class="fakeproduct"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
etc
</div>

 

And it's working!