4

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>
Ed .
  • 6,373
  • 8
  • 62
  • 82
Josh Albright
  • 43
  • 2
  • It's a bit unclear what you are asking. Perhaps you could include some kind of picture or diagram. – Wex Sep 07 '12 at 15:02
  • i can't upload an image yet... but the idea is (assuming my diagram holds!) - now all of this is WITHIN a larger container that is working properly... you can view the MAIN page at http://www.ispitfire.com/ispitfire-preview/Index.html: – Josh Albright Sep 07 '12 at 15:21
  • the diagram did not work. It's essentially like the following - at Mashable.com, under All Stories on the main page, there is a thumbnail to the left, with a headline and copy to the right... similar idea, minus the headline... just a photo on the left side of the wrapper with copy to the right of it. – Josh Albright Sep 07 '12 at 15:31

4 Answers4

4

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.

Boyye
  • 301
  • 1
  • 9
  • since the text is in the same div, it doesn't honor any kind of padding or margin, which makes sense... so i'm assuming the solution to this is to give the text it's own id/class? – Josh Albright Sep 07 '12 at 15:28
3

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>
cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • Why not? It's allowed. Though it should have an alt attribute when used that way. – cimmanon Sep 07 '12 at 15:05
  • Interesting point, I've just never seen that done before. I typically prefer CSS image replacement, but I guess you gain the benefit of being able to utilize the alt tags in the case of a broken image. (also relevant: http://stackoverflow.com/questions/1605454/can-we-place-img-inside-h1-according-to-web-standards) – Wex Sep 07 '12 at 15:08
  • This is clearly a piece of example code and the markup is ok. It's possible that he has a H1 tag above the image.. – Boyye Sep 07 '12 at 15:08
  • Frustrating not having the rep to comment on other answers, but Boyye missed the fact that the OP has 2 images in his example. Using #wrapper img would float both of them instead of only the one grouped with the copy text. – cimmanon Sep 07 '12 at 15:14
  • thanks... i'll play around with this and see what comes of it... i do have separate h1-h4 tags and some knowledge of html... it's just a bit dated and i'm re-teaching myself as i go, which is a nightmare. the header is an image, as the font doesn't render properly and it's a "logo" based font that we're using. – Josh Albright Sep 07 '12 at 15:15
  • 1
    Wex is referring to using image replacement techniques in the CSS (the most common ones can be found here: http://www.mezzoblue.com/tests/revised-image-replacement/). There's downsides to most of them (some use extra markup, some can't be used with transparent images, most don't work with images turned off). – cimmanon Sep 07 '12 at 15:22
  • Cimmanon - thank you very much. I know the code is SLOPPY to say the least. That's the price of learning while doing on my own. The page looks right at this point... it's now a matter of understanding why the pieces that work do, and why the ones that don't ... don't. planning on taking some classes on this, but this is one of those under the radar projects that just hit me. thank you so much! – Josh Albright Sep 07 '12 at 15:40
1

First of all, Never use any spaces naming an ID.

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

Next, elements can be selected by their tags.
An Image is coded by <img tag so you can select it directly in CSS by img { } .

In your case, you want to select image inside #wrapper division, so select it by :

 #wrapper img 
  {
   /* Code Here... */
  }
ygssoni
  • 7,219
  • 2
  • 23
  • 24
0

The problem of your code are the spaces in the id tags.
Try something like

<div id="wrapper_head" ....

instead of 

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

That should solve your problem!

rosetree
  • 105
  • 1
  • 9
  • thank you! this worked for one portion, but not for another... completely re-formatted a portion of the layout once i pulled the space out of
    – Josh Albright Sep 07 '12 at 15:41
  • Of course you have to change this in your stylesheet, too. But I think you did this. I don't know what your problem is, sorry. – rosetree Sep 07 '12 at 17:44