what is the proper way to do this?

Getting errors when trying to validate css, looking for a fix, seems there is a better way, just cant think of it?

Errors Validator is giving me:

 

Use classes instead of id's. You're only allowed to use an ID once per page, but you can uses classes as many times as you need.
You create a class much like an ID:

class="className"

Code (markup):

Than you target your class:

.className{
/*css styling here*/
}

Code (markup):

Also you should get rid if the   stuff in favor of margins and padding.

 

your a genious, thanks!!!!

 

I'd also point that while it's not invalid, using non-breaking spaces like that is bad practice and a waste of markup, since on your IMG you could just set margin-right:2.4em;

NEVER use non-breaking spaces for padding. Also that looks like a list of choices, so why are you using DIV's and not a list? There's also no reason for the service class or to use two separate classes a whole bunch of times in a row. Also since those images appear to all be the SAME image and a presentational affectation NOT content, they don't belong in your markup, they belong in the CSS.

Simplifying it down to something like:

<ul class="wrapList">
	<li>
		<a href="index.html">Drain Cleaning</a>
	</li><li class="even">
		<a href="index.html">Water Heater Repair and Replacement</a>
	</li><li>
		<a href="index.html">Toilet and Sink Repair and Replacement</a>
	</li><li class="even">
		<a href="index.html">Drain, Waste, Vent and Water Line Replacement</a>
	</li><li>
		<a href="index.html">Whole House Re-pipe</a>
	</li><li class="even">
		<a href="index.html">Video Sewer Inspections</a>
	</li><li>
		<a href="index.html">Commercial and Residential, New Construction and Remodel</a>
	</li><li class="even">
		<a href="index.html">Restaurant Plumbing Service and Repair</a>
	</li>
</ul>

Code (markup):

With CSS thus:

.wrapList {
	list-style:none;
}

.wrapList li {
	padding-left:32px; /* width of that check.png */
	background:url(images/check.png) center left no-repeat;
}

.wrapList a {
	padding-left:2.4em; /* roughly equal to six non-breaking spaces */
}

Code (markup):

".wrapList li" would be roughly equal to your 'wraparound' ID but could contain style common to both wraparound and wraparoundtwo. You would then use ".wrapList .even" to target every other one for the styling unique to those... Cornerstone of CSS and classes, only add them when a tag is DIFFERENT from it's kin, not when it's the same.

Which has nothing to do with your validation problem, except that the less code you use the less there is to break - and you asked if there's a better way of doing it. There it is.

 

Yes, everything deathshadow just said. It's much better practice.

 

Seriously, it was in the error message. I know my eyes usually slide off an error page without reading if I don't understand them but this was pretty plain Engrish:

Right in the error message. Multiple times.