New to CSS - Aligning text and photos in a sub-container

Question

I searched for the answer to this question and tried several ways to resolve it to no avail. I teach myself CSS when rebuilding a site and have a little problem.

I have a container inside the parent container - the "sub-container" (due to the lack of a better term) has its own caption, photo on the left and a copy on the right. The copy should be aligned vertically to the photo and evenly distributed between the right edge of the photo and the right edge of the background image in the sub-container. What I get is a photograph in the right place, with a copy pasted into the lower right corner of the photograph.

I am sure that the problem lies in the combination between a lack of knowledge and a misunderstanding of what causes what ... therefore any help with this is greatly appreciated.

Here is 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 with both of them. You can solve this by providing, for example, an ID / class for these images.

Answer 2

Firstly, you are not right about your classes: "#wrapper photo" should be "# wrapper.photo". In addition, id cannot have spaces in them ("#wrapper head").

There are several ways to add the gap you desire. The easiest way is to add an addition to the image:

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

I would also like to point out that the markup you use is very poor. Headings should appear in h1-h6 tags (images are still allowed in these tags!), Text paragraphs should be in p tags. Section or article tags may be a suitable replacement for your wrapping 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 to do this would be as follows:

 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 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> 

Answer 3

First of all, never use spaces representing an identifier.

So change id="wrapper head" to id = id="wrapper_head"

Elements can then be selected by their tags.
The image is encoded with the <img tag, so you can select it directly in CSS using img { } .

In your case, you want to select an image inside the #wrapper section, so select it:

  #wrapper img { /* Code Here... */ } 

Answer 4

Your code problem is spaces in id tags.

Try something like

 <div id="wrapper_head" .... 

instead

 <div id="wrapper head" .... 

This should solve your problem!