How can I position this properly?

Tearing my hair out with my first CSS site!

[groovyhippo]

This is my first CSS site, so bear with me...

I'm trying to position an image to the left of some text and have the whole area shaded with a background colour. Fairly trivial using tables, but having tried endless things I just can't get it working with CSS. The version below works except for the background colour not extending the full height of the image. Please help!

*************** HTML *****************
<div id="prodRecommends">
<h1>You might also be interested in...</h1>
<img src="images/thumbnail.jpg" width="100" height="100">
<h1>This is the title</h1>
<h1>This is the price</h1>
<div class="extra">This is extra info</div>
</div>

*************** CSS *****************
#prodRecommends {
background-color: #e8f1dc;
font: 0.8em/1.5em arial, helvetica, sans-serif, verdana;
}
#prodRecommends h1 {
font-size: 1.3em;
font-weight: bolder;
color: #003300;
margin: 0;
}
#prodRecommends img {
float: left;
border: 1px solid black;
}

[Bonusbana]

You might want to clear the float in your .extra div, try adding this to your css:

.extra {
clear: left;
}

Also, it is not correct markup to use three <h1> tags like you do in your example. H1 is for main headings only and should not be used as "normal" text or subheadings.

[groovyhippo]

I tried the clear:left but it then moves that bit of text beneath the image.

[Hester]

Apparently this is correct behaviour for floats. If you look at the W3C definition of how they work (and no I don't understand it either!) there's a picture that shows exactly what's happening with your layout. It's the second one down.

[w3.org...]

Since a float is not in the flow

Hence the image is not part of the main div anymore, I think. (Though it starts off aligned to the top of the div.)

[Old_Honky]

Try adding the float:left to a new div containing the image/header/price, and using the prodrecommends div as a container for the new div and the extra div.

Also you may want to reconsider adding the clear:left to the the extra div, it means nothing can float to the left of it so it will start a new line below the image div.

<edit>
I think you also need to declare a position and width for floated elements.
</edit>

[ronin]

groovyhippo> Where floats are concerned, height and width become very important. It's advisable to always give at least the width of a floated element and sometimes - as in this case - to give the width and height of the containing div.

Try this:

<style>
#prodRecommends {
background-color: #e8f1dc;
font: 0.8em/1.5em arial, helvetica, sans-serif, verdana;
width: 100%;
height: 150px;
}
#prodRecommends h1 {
font-size: 1.3em;
font-weight: bolder;
color: #003300;
margin: 0;
}
#prodRecommends img {
float: left;
width:100px;
height:100px;
margin: 6px;
border: 1px solid black;
}
</style>

and this in the html:

<div id="prodRecommends">
<h1>You might also be interested in...</h1>
<img src="images/thumbnail.jpg" alt="Description of product">
<h2>This is the title</h2>
<h2>This is the price</h2>
<p>This is extra info</p>
</div>

[groovyhippo]

Thanks, that works great and has explained a lot. I still have a lot of learning to do with CSS obviously!

[Bonusbana]

I never specify a width on my floating images in a layout. Sure, with CSS-P and a two-column layout it is preferred to specify a width to the floating column, but I am sure you can safely use img {float: left;} without any harm.

On many websites images are generated dynamically and it is impossible to put a general width value into the css.

To me, it sounds like you would like the containing div around your text and image to stretch all the way down. A floating element does not stretch its containing div, that is why you need to clear the float before you close the containing div.

I dont really see the point in specifying a height on the containing div, since it prevents the div to grow dynamically in height when f.e a user resizes the text.

If you put clear:left in your .extra style, the markup that are inside the .extra div will come below the clear. To solve the problem, you should simply add another div like so:

<div id="prodRecommends">
<h1>You might also be interested in...</h1>
<img src="images/thumbnail.jpg" width="100" height="100">
<h1>This is the title</h1>
<h1>This is the price</h1>
<div class="extra">This is extra info</div>
<div style="clear: left;"></div>
</div>

I hope this makes sence.