CSS Float problems in certain browsers?

Question

This is my first post, and I'm excited to have just joined this community! :)

I'm jumping ship from IT/SysAdmin to work for myself and do do web design/development. I need to unleash my creative juices!

I'm looking forward to learning a lot and helping as much as I can as my knowledge grows!

-- Alright, here's my issue. I'm very new at doing this and my first project is an in-kind website for a charity ball in one month's time. I've begun laying it out using what I know of CSS and HTML (having only copied some parts of the nav menu's CSS). In Chrome, the website looks like I want it to! In IE, Safari, and Firefox, my floated elements are not in the right spots! Also - I made a 3 column layout and that also moves from where I want it to be, except in Chrome.

Should I use the position attributes instead of floating these elements?

Hopefully, I'm not asking too much for anyone to give me some sound advice of how to remedy this problem and I can apply it to all future websites as well! I've tried to layout the website cleanly and organized. I've completed Lynda.com's HTML and CSS tutorials. Nothing like real-world experience, though!

I don't have anything to offer, but I can +1 your replies, or however this forum works! haha - All help is greatly appreciated!

I've spent 10 hours so far on building the site, but that includes the graphics. I apologize if my answer is found in another article. I'm going to bed now - and as I'm still new - I imagine a response would be quicker than me browsing article after article and trying multiple things to fix my problem.

The website is at: http://www.niagaramasquerade.com/Untitled-2.html

Thank you so much everyone! - Aaron Zitello

Answer 1

Try adding clear:both on the container div:

#col_container {
    clear: both;
    margin-top: 104px;
}