clear: left clearing a separate div as well

[wavedancer]

I have taken over a site which I am trying to tidy up and update whilst learning the arcanities of CSS (particularly in relation to IE).

Below the header banner image and horizontal menu is the main section, which consists of a sidebar with mostly internal links and a content section with images and descriptions of items that are for sale.

The difficulty I am having is persuading a new paragraph to begin below a left-floated image rather than beside it. If I use <p class="clear: left"> it clears not only the image but also the whole of the content of the sidebar, leaving a big gap in the text.

This happens in all seven browsers I've been testing in (Safari 1.3.2, IE5.2/Mac, Firefox 2.0.0.1/Mac/Win, Opera 9.10/Mac/Win and IE6/Win). I'm using Virtual PC to view the Windows versions as I only have a Mac.

#sidebar and #content are enclosed in a div named middlewrap, and I've checked by using coloured borders that they don't overlap. I have no idea what I am doing wrong. Here is the link:

http://www.goddess-gift.co.uk/test/goddess-gift_test/

I can also post the code here if that will help.

Can anyone help me, please? I'm probably doing something really obviously wrong, but I just can't see what, and I can't find anything to help me online. Remember that I have inherited this site and so I don't entirely understand what is going on with the layout...

Helen

[AricC]

Going to lunch will fix in an hour or so unless someone gets to it before me, let me clarify are you talking about the image that is currently not showing you want the text to go just below that image?

Aric

[wavedancer]

Going to lunch will fix in an hour or so unless someone gets to it before me, let me clarify are you talking about the image that is currently not showing you want the text to go just below that image?

Aric

Thank you, Aric. I would like the text beginning 'Semi-precious stones and crystals...' to go just below the image of the smudge sticks in the second paragraph. It's currently starting level with just below the sidebar, and it needs to move up to fill in the space.

(Obviously the text is out of date but I need to know for when I put in the new text.)

Helen

[AricC]

Ok, a few things why do you have comments around so many tags? Also why are you clearing anything thing by default a new paragrap <p> tag should give you a new line. Also, I think you'd be better off getting rid of this <if IE> stuff and make 1 style sheet for all of your pages the way it looks you will be creating several different style sheets for each page and you don't want to do that.


Aric

[wavedancer]

Ok, a few things why do you have comments around so many tags? Also why are you clearing anything thing by default a new paragrap <p> tag should give you a new line. Also, I think you'd be better off getting rid of this <if IE> stuff and make 1 style sheet for all of your pages the way it looks you will be creating several different style sheets for each page and you don't want to do that.


Aric

I inherited the style sheets along with the rest of the site, and I'm trying to tidy it up and make it work. Most of the comments are a reminder of what does (or is supposed to do) what. Some things may have been commented right out because I didn't write them but I'm not sure whether at some point they will turn out to be necessary. There are also dotted borders that are commented out; I unhide them if I need to see how two or more divs relate to each other.

I don't know how to put it all on one style sheet and get IE to follow its own instructions while the other browsers stick to the rules. The separate IE style sheet came with the site as well. In fact, there were three style sheets to begin with: one called themes/index.css, which is obviously what the designer uses to base all his websites on, as they are all very similar in layout, one called layout.css which in some places conflicted with the first one, and a third one called ie6.css which was written specifically for Internet Explorer. I have no idea at all what all the * html and body>div# stuff means – and would be very grateful for any links to online resources that would explain it – so I have left it. By going line by line through the other two style sheets, I have been able to work out what to keep and what to discard, and to merge them into one. If you are able to suggest ways of further pruning what is left, I'll be very grateful. I am very new to all this, and it does feel like a baptism of fire.

I know that a new <p> tag will start the next sentence on a new line, but that's not necessarily going to be below the image. If I replace <p class="clear: left"> with a simple <p> tag, the new paragraph will begin next to the image, not underneath it where I want it to be.

Are you able to explain to me why "clear: left" also clears the content of the <div> next door, which is quite separate? Am I doing something wrong?

Thank you, Aric. I appreciate the trouble you have taken.

Helen