Newbie to CSS - aligning text and a photo within a sub-container

Question

I've been searching for an answer on this, and tried multiple methods of fixing it to no avail. I'm teaching myself CSS while re-building a site, and have a small problem.

I have a container within a parent container - the "sub-container" (for lack of a better term) has it's own header, a photo to the left, and copy to the right. The copy should be top-aligned to the photo, and equally spaced between the right edge of the photo and the right edge of the background image in the sub-container. What I'm getting is the photo in the proper place, with the copy butted up against the bottom right corner of the photo.

I'm fairly certain the issue is a mix between lack of knowledge and a mis-understanding of what is causing what... so any help with this is greatly appreciated.

Here's my CSS:

#wrapper {
  background-image:url("images/About/Copy-Block.png");
  background-repeat:no-repeat;
  width: 745px;
  height: 339px;
  margin: 0 auto;
  margin-top: 30px;
}

#wrapper head {
  display:block;
  padding-top: 15px;
  padding-bottom: 2px;
}

#wrapper photo {
  float: left;
}

.wrapcopy {
  padding-left: 90px;
  font-size: 13px;
  color: #FFF;
}

and here is my html:

<div id="wrapper">
  <div id="wrapper head" align="center">
    <img src="images/About/About-Us-Subhead.png" width="748" height="116" />
  </div>
  <div class="wrapcopy">
    <img src="images/About/image.png" width="257" height="194" class="wrapper photo"/>
    <i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</i>
  </div>
</div>

Answer 1

You wrote "photo" instead of "img" in your CSS, edit it like this and it will work!

#wrapper img{
float: left;
}

However, you have 2 images in your example and this will float both of them. You can solve that by giving for example an ID/class to those images.

Answer 2

First off, you aren't referencing your classes properly: "#wrapper photo" should be "#wrapper .photo". Also, id's can't have spaces in them ("#wrapper head").

There are a few ways you can add spacing you desire. The most straight forward way would be to add padding directly to the image:

#wrapper .photo { float: left; padding-right: 10px }

I would also like to point out that the markup you are using is very poor. Headlines should go in h1-h6 tags (images are still allowed in these tags!), paragraphs of text should be in p tags. Section or article tags might be an appropriate replacement for your wrapper div. It's not enough to know CSS, you also need to know the appropriate HTML markup to go with it.

A more efficient way of doing this would be like this:

section.foo {
    background-image:url("images/About/Copy-Block.png");
    background-repeat:no-repeat;
    width: 745px;
    height: 339px;
    margin: 0 auto;
    margin-top: 30px;
}
section.foo h1 {
    padding-top: 15px;
    padding-bottom: 2px;
    text-align: center;
}
section.foo p {
    padding-left: 90px;
    font-size: 13px;
    color: #FFF;
    font-style: italic;
}
section.foo p img {
    float: left;
    padding-right: 10px;
}

And the HTML:

<section class="foo">
<h1><img src="images/About/About-Us-Subhead.png" width="748" height="116" /></h1>

<p><img src="images/About/image.png" width="257" height="194" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</section>