Multiple CSS DIVs or is there another way?

Question

I am hoping that there is a workaround to my existing (and
archaic) approach to reproducing DIV elements to product content
blocks on the following page:
careers
vancancies
At present, this entire microsite is hand coded and manually
updated without the cost or complexity of dynamic intervention. No
budget apparently as my time is free (so it seems!)
In order to recreate a job role block, I am duplicating the
following CSS:
#role1 {
background-color: #f5f5f5;
padding: 10px;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 20px;
border: 1px solid #0265CA;
when I want to add more, I create #role2,#role3,#role4 etc. I
am of the understanding that a DIV can only be used once per page.
Ultimately, which element can I use to emulate what I am currently
doing (adding multiple job role blocks) without having to duplicate
a DIV multiple times. Is it a 'class' thing, and if so what do I
apply it to to render the same.
I hope this makes sense
RB

Answer 1

aarbie wrote:
> I am hoping that there is a workaround to my existing
(and archaic) approach to
> reproducing DIV elements to product content blocks on
the following page:
>
http://careers.theentertainer.com/current-vancancies.htm
>
> At present, this entire microsite is hand coded and
manually updated without
> the cost or complexity of dynamic intervention. No
budget apparently as my time
> is free (so it seems!)
>
> In order to recreate a job role block, I am duplicating
the following CSS:
>
> #role1 {
> background-color: #f5f5f5;
> padding: 10px;
> margin-right: 15px;
> margin-left: 15px;
> margin-bottom: 20px;
> border: 1px solid #0265CA;
> }
>
> when I want to add more, I create #role2,#role3,#role4
etc. I am of the
> understanding that a DIV can only be used once per page.
Ultimately, which
> element can I use to emulate what I am currently doing
(adding multiple job
> role blocks) without having to duplicate a DIV multiple
times. Is it a 'class'
> thing, and if so what do I apply it to to render the
same.
If all containers have the same attributes then you can group
them using
a comma between the id names:
#role1, #role2, #role3, #role4 {
background-color: #f5f5f5;
padding: 10px;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 20px;
border: 1px solid #0265CA;
if you want to change a particular attribute of say #role2,
the bottom
margin, just add this to your css styles: (make sure it comes
after the
original styling in the css cascade)
#role2 {
margin-bottom: 50px;
OR as you say you can use 'classes'. Just create one css
class for all
containers.
.role {
background-color: #f5f5f5;
padding: 10px;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 20px;
border: 1px solid #0265CA;
Then apply it to the containers:
<div class="role">Role 1</div>
<div class="role">Role 2</div>
<div class="role">Role 3</div>
You might save yourself some time by using css shorthand
margin: 0 15px 20px 15px;