Let's just get it out of the way that I'm a complete CSS amateur. On my sleeping bags page, I have a photo of a sleeping page floating on the left about halfway down the page. I also have a h2 element image and unordered list bullets on the page. However, when I place the sleeping bag photo next to the h2 element or the lists, the text moves over for the image but not the h2 background or the ul bullets. The css images stay in place.

How can I fix this so that the css images move over with the text? Does it have something to do with that my photo is floating?

.subcontent h2, .innercontent h2, .recipe h2 {
	font-size:1.8em;
	font-weight:lighter;
	background:url(../images/bordertitle.png) no-repeat 0 100%;
	margin:0 8px 0 16px;
	padding:10px 0 7px 0;
}

.imgleft {
	float:left;
	margin:8px 8px 8px 15px;
	border:1px solid #ababab;
	padding:2px;
}

The image is an in-line element. The H2 is BLOCK level element. If you want the h2 to move over, set it to display: inline. Or, you can clear the float by adding clear:left to the h2 and it will then sit below the image.

Okay that makes sense. But after I add in display: inline, now the h2 moves over, but it looses the padding and length of the line. And when I tried it with the ul li's, it puts them all on one line.

Yup, that is what it does when you switch an hx to display-inline like that, it becomes only as long as the text.

The other solution is to clear the float on the h2 - clear:left, and let it fall below the image.

Well that sucks. There is no way you can think to get around it? I tried to add a clear:left to the li's but it didn't put them on separate lines. Thanks so much for your help!

Well, you could also just float the image right instead of left.

Yup. Thanks for your help!