The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Image Floats and General layout help needed.

Hi there,

I am working on a site- just getting started. Still fairly new to CSS- just keep hacking away at it. Iam trying to take one element on the page at a time- i am now on images.

It is a corporate site, so i have the homepage, left column with items like press releases, in the news, and events. I have press releases working okay, now i am trying to work on the In the News section, with images and text that are stacked. I seem to get varying results on IE, FireFox and Opera- and i am not sure what I am doing.

I am trying to build it simply so that each section has it's own div, but i want the spacing beween each section to the be the same. iam not sure if i am explaing well, and I dont know the best way to show you my work so far. I have it here:

Floats are renmoved from the flow and will stick out of their parent container if not contained. This is what mozilla does but ie doesn't. If you want the images and the text to clear the items above then you will need to set the p to :clear:both so that it starts on a new line.

i dod notice that on IE there looks to be too much space between each event item- yet on FireFox it looks better- is there anyway to get it to look consistent on all browsers?

If you are talking about the default spacing that is applied to elements then you need to explicitly control the padding and margins of those elements.

These days I usually use the universal selector(*) to set all paading and margins tozero right at the top of the stylesheet.

Code:

* {margin:0;padding:0}

That will set all browsers to the same zero defaults and then you can apply the exact padding and margins that you require for consistent results. Remember that lists need a left padding (or margin) in order for the bullets to appear so you also need to set that manually when using the method above.

If your question is about bugs with floats then the faq has large entry on floats that covers nearly all their misbehaviours and show you how to fix them. I have no troubles with floats and once you know the little bugs and behaviors they work well and consistently.