DIV ID repeats... Bloated code? HELP!

Hello all,

How can I re-work this:

The test page (For the full effect, manually re-size the window.)

the style sheet

...to validate here:

Validator

Basically, I am trying to make it so I do not have to define the div dimensions/padding/margins/borders for every instance... but the way I have it set-up, the validator does not like repeated div id's...

Does anybody have suggestions for making my code compliant and a bit more streamlined? Javascript? PHP?

I plan to use a simple PHP "for loop" to fill the page with the colored DIVs...

Thanks in advance.
M

the id have to be unique, you can only use it on one element in a document.
http://www.w3.org/TR/html401/struct/global.html#adef-id

instead of the id on each element you could use multiple class or use the cascading in css.

like
#main_container div { /* some style */ }
affects each div within the element #maincontents

or with multiple classes

.c_s { /*some style */}

and in html
<div class="c_s s_ffcccc"></div>

Ahhh, thank you very much Akh, your suggestions were very helpful! Here is the new code:

HTML

CSS

Validates perfectly:

Validator

Still looking for advice on making the code more dynamic...

This is an interesting example that uses tables and CSS:

Table-art

Thanks!
Cheers,
M