Bonusbana
msg:1202991 | 8:45 am on Aug 4, 2004 (gmt 0) |
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
msg:1202992 | 9:03 am on Aug 4, 2004 (gmt 0) |
I tried the clear:left but it then moves that bit of text beneath the image.
|
Hester
msg:1202993 | 9:41 am on Aug 4, 2004 (gmt 0) |
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
msg:1202994 | 10:01 am on Aug 4, 2004 (gmt 0) |
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
msg:1202995 | 10:32 am on Aug 4, 2004 (gmt 0) |
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
msg:1202996 | 1:42 pm on Aug 4, 2004 (gmt 0) |
Thanks, that works great and has explained a lot. I still have a lot of learning to do with CSS obviously!
|
Bonusbana
msg:1202997 | 6:35 pm on Aug 4, 2004 (gmt 0) |
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.
|
|
