Images overlapping .. what am I missing?

So I'm fairly new to CSS and I'm wondering why the images overlap when I use this for my css

#features { width:300px; height:50px; }
#features #feaTure1 { background: url(img/features1.gif) no-repeat; width:500px; height:50px; padding:0 0 0 0; }
#features #feaTure2 { background: url(img/features2.gif) no-repeat; width:500px; height:50px; padding:0 0 0 0; }
#features #feaTure3 { background: url(img/features3.gif) no-repeat; width:500px; height:50px; padding:100px 0 0 500px; }

Code (markup):

and than

<div id=features><div id=feaTures1><div id=feaTures2><div id=feaTures3></div></div></div></div>

Code (markup):

The images are overlapping each other. How do I make it so each image is spaced out side by side? Or is there an easier way to do this.

 

Can you put padding on it? Or maybe tables?

 

I'm not really sure what you are trying to accomplish here, but based on your code, I'm sure that there is an easier way to do it.

What do you want this to look like? What are you trying to accomplish?

 

I'm trying to display the images as links side by side within a table. But with the coding I showed up there, the images are overlapping each other.

 

The width of #features needs to be the width of all of your images added together. And instead of using tables you can have each image float left with a certain width and they will be side by side. If you use the float method you should not specify a width for #features.

Edit: use this

#features {}
#features #feaTure1 { background: url(img/features1.gif) no-repeat; width:500px; height:50px; padding:0;float:left; }
#features #feaTure2 { background: url(img/features2.gif) no-repeat; width:500px; height:50px; padding:0;float:left; }
#features #feaTure3 { background: url(img/features3.gif) no-repeat; width:500px; height:50px; padding:0;float:left; }

Code (markup):

and the html will be

<div id="features">
<div id="feaTure1"></div>
<div id="feaTure2"></div>
<div id="feaTure3"></div>
<div style="clear:left;"></div>
</div>

Code (markup):

 

Thanks for the help Bryan and everyone else.

 

Yep, if you need any more help feel free to PM me, I know just about everything with HTML and CSS.

 

wwwbryan - Clearing div? How 1997 of you...

First off, you have one perfectly good ID, assuming there is going to be no other content inside those DIV, there's no reason to be wasting a div on them...

Second, you can nest them the way you originally had avoiding the whole possible float headache, and it will be auto-shrinkable just chopping off one side if too wide. (which at 1200px wide is exactly what will happen)

Third, you are trying to put 500px wide elements inside a 300px wide one, that just isn't going to fly.

Finally, if only displaying three elements, you should only be using three containers, not four or (as wwwbryan did) five.

I'd reduce the html to

<div id="features"><div><div></div></div></div>

Code (markup):

With this CSS:

#features {
	height:50px;
	background:url(img/features1.gif) 0 0 no-repeat;
}

#features div {
	height:50px;
	background:url(img/features2.gif) 500px 0 no-repeat;
}

#features div div {
	background:url(img/features3.gif) 1000px 0 no-repeat;
}

Code (markup):

If I was to make them all separate elements as wwwbryan did on the assumption of wrapping to make them show and the outer wrapper to clear floats, the markup would be:

<div id="features">
	<div class="first"></div>
	<div class="second"></div>
	<div class="third"></div>
</div>

Code (markup):

with this CSS:

#features {
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats IE */
}

#features div {
	float:left;
	height:50px;
	width:500px;
}

#features .first {
	background:url(img/features1.gif) 0 0 no-repeat;
}

#features .second {
	background:url(img/features2.gif) 0 0 no-repeat;
}

#features .third {
	background:url(img/features3.gif) 0 0 no-repeat;
}

Code (markup):

Though to be honest I'd probably just make them one image... and I'm pretty much guessing at what you are trying to do. Do you have a picture of what you want? Should it wrap if the screen is too narrow, or should it chop off the extra?