homepage Welcome to WebmasterWorld Guest from 54.167.173.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How can I position this properly?
Tearing my hair out with my first CSS site!
groovyhippo




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

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




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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved