Question

My code looks like:

<div id="divone"><div class="content">Content here</div></div>
<div id="divtwo"><div class="content">Content here</div></div>
<div id="divthree"><div class="content">Content here</div></div>
<div id="divfour"><div class="content">Content here</div></div>
<div id="divfive"><div class="content">Content here</div></div>
<div id="divsix"><div class="content">Content here</div></div>

The css:

.content { width:960px; margin:auto;}
#divone { background-image: url(bg1.png); background-repeat: repeat;}
#divtwo { background-image: url(bg2.png); background-repeat: repeat;}
#divthree { background-image: url(bg1.png); background-repeat: repeat;}
#divfour { background-image: url(bg1.png); background-repeat: repeat;}
#divfive { background-image: url(bg1.png); background-repeat: repeat;}
#divsix { background-image: url(bg1.png); background-repeat: repeat;}

I made a jsfiddle to give you an idea of what I’m doing http://jsfiddle.net/64H5p/

Is there an easier way without adding the .content every time I want the div aligning to the centre? The site I’m working on has about 100 of these per page.

Answer 1

Try this in your css code

div[id^='div'] div { 
  width:120px;
  margin:auto;
}

DEMO