Welcome to WebmasterWorld Guest from 54.197.171.28

Forum Moderators: not2easy

Message Too Old, No Replies

How can I position this properly?

Tearing my hair out with my first CSS site!

   
8:12 am on Aug 4, 2004 (gmt 0)

10+ Year Member



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

8:45 am on Aug 4, 2004 (gmt 0)

10+ Year Member



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.

9:03 am on Aug 4, 2004 (gmt 0)

10+ Year Member



I tried the clear:left but it then moves that bit of text beneath the image.
9:41 am on Aug 4, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

10:01 am on Aug 4, 2004 (gmt 0)

10+ Year Member



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>

10:32 am on Aug 4, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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>

1:42 pm on Aug 4, 2004 (gmt 0)

10+ Year Member



Thanks, that works great and has explained a lot. I still have a lot of learning to do with CSS obviously!
6:35 pm on Aug 4, 2004 (gmt 0)

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month