CSS Floating Elements

[jkp2505]

Hi,

I am trying to design a newsletter and am having some trouble with using floating elements in CSS. I have experienced these problems many times before so I would really like to find a solution.

I have a two column layout made up of two DIV elements, one set to float: left and the other set to float: right. They are both inside another DIV. I want to put a paragraph underneath using clear: both, but Firefox seems to ignore the margin property I set. It does not leave a line above the paragraph like it should. Could anyone explain to me how this works? I understand that parent DIV's don't expand if they contain floating elements, but how can this be overcome?

Thanks,

James

[fleetwood]

Hi James

Could you post a URL please, so we can take a look.

[leehack]

I'd float them both to the left personally, unless you have a specific reason for floating to the right.

The clear facility should start it on a new line directly underneath. If for example the text is in a <p> tag and you have zeroed the margin on that element, there will be no space. Some padding-top applied to the "footer" div would probably be your answer.

[fleetwood]

It does not leave a line above the paragraph like it should.

also check that you have not changed the default <p> padding.

to leave a line, you would usually have padding either top or bottom, which would be there by default on a <p> tag

However, if you have zeroed all body tags, or specifically the <p> tag, this would knock out the line between paragraphs.

[jont]

The parent <div> won't expand and has to be made up of the total width, margins and borders of the child <div> if smaller it will break in some browsers (often FF as it play by the rules)

Try floating both childs left and set the right child to clear: right and then followed by an empty <div class="clearBoth"><!-- spacer --></div> with the clear to both and the height set to the space required.

Don't forget that <div>'s will not take up the total of the bottom and top margins as they in effect "slide" over each other hence the reason you could be losing the space above.

HTH

[jkp2505]

Thanks for the replies,

I have posted a copy of the newsletter at

http://www.inkandmedialtd.co.uk/newsletters/colourlaser/newsletter.html

Forgive the inline CSS and the style tag inside the body. These are to make the newsletter work in Hotmail etc.

I want there to be a margin of say 20px between the bottom of the photo of the printer and the top of the description. Despite the fact that I have manually set the top margin of the DIV, FireFox seems to ignore it. IE7 seems to work as I would expect.

Am I doing this the wrong way? Apologies if I have missed something obvious. I haven't set the box with the specification to float left because I want the right edge to be in line with other things, and it would make it more complicated to set the margins and widths etc.

Cheers.

[leehack]

James

Thats a hell of a lot of code to achieve what you are after. Without reformatting it so it can be read easily, i would suggest trying a padding-top: 20px; on the <p> tag in question. See what that does. It is probably a quick fix and not ideal, but might work.

[jont]

padding-top: 20px; on the <p> tag in question

Indeed - adding to the stylesheet

#printerdescription p {
padding-top: 20px;
}

on the fly in Firefox did the trick (obviously don't have the same bag of tricks to test in IE)

[leehack]

Dreamweaver formats it as firefox it would appear, i just tried it there and it worked. At worst in IE it will give a larger space, which you could even out by reducing it to 10.

I cant get the dowenload for that on the fly firefox to work - sigh.

[jont]

It helped having the ID <div> with the child <p> in there .... otherwise would have been much more fun