HTML and CSS Help

emRae77 · February 26 '10, 01:25 PM (#1)

Hi I'm teaching myself how to create a website with CSS and I've hit a wall.
I can't seem to get my floats to work properly in Firefox 5.0. It looks correct in Safari 4. I still need to test it in some other browsers as well. Here's the link to my site http://nutritiononrequest.com/test.html

**mlseim** · February 26 '10, 01:53 PM (#2)

Upload your site, but change the name of your main page from "index.html"
to "test.html" and then give us the URL so we can see it.

Anyone else visiting your site will see the "old index.html" ... whatever that is now.

emRae77 · February 27 '10, 02:49 AM (#3)

thanks, that is much easier! Here is the URL http://nutritiononrequest.com/test.html

I was able to fix the background issues but there's still a problem with the floats in Firefox.

aeroweb99 · February 27 '10, 11:09 AM (#4)

Ok, your comments are screwing things up. You can only have 2 dashes for whatever reason. When I edited some of the comments like this:



and got rid of the extra dashes, the floats slid into place. They were actually showing up on the page and taking up extra space and that's what shoved your sidebar down.

emRae77 · February 27 '10, 04:40 PM (#5)

wow can't believe it was the comments messing everything up. it's always the small things

thanks!

emRae77 · February 27 '10, 08:32 PM (#6)

okay, got the floats to actually float but... now for some reason my rightColumn float will not line up with the bottom of my header div. Arrrg. I'm at a loss for what's wrong...i've tried changing my margins a bunch of different ways and looked for anything that might bump that right div down but I can't find anything.

http://nutritiononrequest.com/test.html

aeroweb99 · February 27 '10, 09:21 PM (#7)

I'm going to say it's the h1 tag inside. Set the margin top to 0. You may have to tie it in with the .mb class like this:

Code:

.mb h1 {margin-top: 0;}

Although I think it would look a little better if you lowered the left column to where the right one is. It looks cramped the way it touches the green part.

HTML and CSS Help

CSS floats not previewing properly