Floated Columns, when following the directions to set columns left and right as in the video its showing different?

I'm currently in the 'Floated Columns' section in the 'CSS Basics' of the Front End Web Development track. While following along with the code as below, the outcome results aren't showing exactly in the video. The outcome that i see, is the .tips div with the photo is pushed to the bottom of the page, and the footer orange border bar is through the tips photo and the footer text is of the left side. The resorts div is above the tips div with its text and photo like it showed initially when they were 'stacked on one another'. The tips div and resorts div are not 'side by side' as they should be with the float element.

.resorts, .tips, { width: 46.5%;}

.tips { float: right; }

.resorts { float: left; }

Has this occurred for anyone else? If so, what did you do to 'correct' this? And / or is this just the default of how it is to look on my end?

Any advice would be helpful. Thank you. :)

note - when I went to use the overflow function, the entire page when back to how it looked at default before adding float as part of the property. Am I missing something, do i need to edit the parent?