What is breaking my div tag?!

[ninok5]

Hi all

I am a newb when it comes to css for the most part. Im haveing a problem where my website footer is jumping up and is not recognising the left column in firefox. IE shows it just fine.

here is the page:

http://www.ninemi-media.com/contact.php

The basic structure is i have a "column" div tag sorrounding the whole middle portion of the site. It includes the "left column", "right column" and "footer" div tags within it. The problem is that in firefox the left column is not recognized and the footer snaps up to the right columns height. It is ok if the right column is taller but if it is not then the footer appears to go under the left column. Id rather fix the problem or atleast know why its breaking before i go and avoid it. Any ideas? If you look at it in IE and firefox you will see how it is "supposed" to look. The source and style sheets are getting long so i wont post them but the div tags do match up. The news script and login page shouldnt matter, those are just included php scripts.

 

[Vragabond]

You're not coding to standards. Standards say that elements that are floated (#left_column) are taken from document flow and do not contribute to the height of their parent element. Basically, when you float left column, anything in that column doesn't push the main content but just floats over it. Standards also say that the first element which should break from floating should have clear specified, regarding to which side element before it was floated (left, right or both). Your problem is easily solvable. Add this to your #footer.

#footer {
  ...
  clear: both;
  ...
}

 

[ninok5]

hmm, thanks. The thing is when i didn't float the left column, and used a negative top margin for the right to move it up higher, it still behaved like that. I am not familiar with the clear command so ill explore that further. Thanks a lot for the prompt response .

 

[ninok5]

sweet, that totally worked. Thanks a bunch. So clear just makes it so floating blocks are not allowed on either side, as in it accounts for their heights?

 

[Vragabond]

Element that is cleared cannot float next to any other element but needs to reside at the bottom of the longest floated element. Just what you needed.