css help!

[wolverinejoe80]

here is my problem. i have a white page border on my website.

http://www.jc-dc.net/html2/z001.gif

instead of square, i want it to look like this, a never ending square

http://www.jc-dc.net/html2/sample1.gif


this is my code for the white square
.pageborder {
border:1px solid #FFF;
background-color:#FFF;
margin-left:auto;
margin-right:auto;
width:840px;
height:530px;
top:50%;
left:50%;
margin-top:-265px;
margin-left:-410px;
text-align:left;
position:absolute;
}


what do i have to do make it never ending square? that 2nd pics works on my computer, but in a smaller screen, it's off centered. also, it works in firefox, but doesn't work in explorer.(there is a gap) what do i have to change, so it is perfectly in the middle and square never ends?

this is my first time doing css, and i'm kinda lost. please help me. thanks.

[Wickham]

what do i have to do make it never ending square? what do i have to change, so it is perfectly in the middle and square never ends?


First, make the two grey bands separate from the image in between.
I can't tell whether your image includes the left and bottom text all together with the images or whether they are all coded independently but I have assumed below that it is all one big image.
Put this in your page code and see what I have done. I left the border in so you can see where it is.

<div style="width:100%; height: 50px; background-color:#bbb"></div>
<!--this gives a wide grey band full width-->

<div style="text-align:center; border:solid 1px;">
<img src="image.jpg" width="300" height="200" title="Images" alt="Images">
</div>

<div style="width:100%; height: 50px; background-color:#bbb"></div>
<!--this gives a wide grey band full width-->

This will put the whole set of images and text central, but as there is text on the left of the images they will appear slightly to the right. If you want the images to be central you will have to make a containing div with a float:left div for the left text, then a float:right div of equal width but no text so that the images in a div float up centrally in between. However, this usually means that the images flip down to a lower row when viewed with a smaller screen resolution unless it is all given position:absolute and fixed div widths.