Why do I have different white space beneath the same div style?

[santafe]

I have coded up a ‘Tip’ or ‘Note’ style for my content but the applications of its use results in different white space neneath their content. At first I thought that somehow the h3 tag that was beneath was causing the problem, but I used the same h3 tag for each and the result is the same: Tip 1 has more white space than Tip 2 and Tip 3.

Here is the page in question: http://www.wwbydesign.com/major/projects.html

Its style sheet is: css / majorStyle.css

The styles in question are: .tip, .tip .title …, and .tip .tip-info … and begin at line 197

I suspect that this anomaly may be due to the fact that Tip 1 is not within the div’s that the other two are but I am not certain of this. Tip 1 does not look that bad, but I would prefer to have their spacing all the same if possible. I would also like to know what is causing this even if it cannot be improved or changed.

Any comments or suggestions are most welcome.

Thanks!

[RyanReese]

Long story short-you haven’t contained yoru floated elements within .tip. Googlign will provide countless articles.

Add overflow:hidden; to .top{}

You will want to adjust the bottom margin you tried to band-aid fix (e.g. instead of 16em you might want just 1em)

The tips have different heights (different amount of content) so thus different spacing. It currently has no height because .tip doesn’t recognize any of the floated children.

[santafe]

@RyanReese

Thank you so much. That helped immensely.

I sincerely appreicate your help.

[ronpat]

I started a new topic with an unrelated hint for @santafe here:

http://www.sitepoint.com/community/t/responsive-menu-border-jumpiness/114976