CSS for positioning

[riversr]

I am developing a scoreboard for high school sports. I am having a problem getting CSS positioning to accomplish what I need. I have created a page that contains 8 <div>s. I used CSS positioning to get them where I want them on the page. I did the positioning based on %, not pixels, i.e. each of the <div>s is positioned with code that looks like this:

<div class="col1" style="top:65%; z-index: 106;">
<RFI:repeater id="class6a" runat="server"/>
</div>

col1 is a CSS class that has other CSS attributes for all the <div>s in the left column. There is also a col2 class for the right column.

My problem is this, if I display the page on a full screen everything works fine, but if I shrink the page down the spacing between the <div>s is lost and they begin to overlap each other. The behaviour that I would like when the screen size is reduced is that the <div>s would shrink proportionally and the spacing between them would remain.

I have experimented with changing the positioning using other methods but that seems to disable the auto scrolling that I have working now.

I would appreciate any help/advice on how to make this page maintain it's display no matter what size it is.

[edited by: jatar_k at 3:23 pm (utc) on July 29, 2006]
[edit reason]
[1][edit reason] no urls thanks [/edit] [/edit][/1]

[4css]

Hi,
You need to validate your html and your css. If you take care of the errors on this, come back and post a bit more of your code.

However, if I am reading your posting correctly both divs are 65%, that equals 130%, which takes your page above 100% and is larger then the window, if that makes any sense. Also please remove your link if you still are able to.

as per the TOS [webmasterworld.com] there is no posting of url's for site reviews permitted.

Hope this helps!