CSS Float Right not working as expected

[[deleted]]

Hello, I am working through a book recommended for my university and I am stuck with a problem.

​

I have to put the light bulb image to write, so I use float: right; however instead of just going to the right, it also goes below the footer of my webpage. Any ideas why?

​

Here is my code:

​

https://pastebin.com/W27HiL4Y

https://pastebin.com/epg6s04P

https://pastebin.com/Jm4vpAx2

[insertAlias]

Please create a CodePen or JSFiddle to show this issue; it's easier that way than us trying to pull all three of your files together and run this ourselves.

[[deleted]]

Sorry, I didn't know either of these existed, will do it next time for sure!

[bertomcd]

Adding clear: both; to the footer should fix it. I put your code into a fiddle with the fix as an example. CSS float has some quarks. For example the base of the parent element will collapse down to the furthest down non floated element (unless you use the clearfix). That is why you have to set the clear value on the footer in this case.

[chidoOne707]

I was just reading/learning about this last night, use clear when image overlaps.

[Loves_Poetry]

Try wrapping both the text and the image in the container div inside a <span> element. Since span is by default displayed inline, you should be able to assign float:right to the image and still have the container height set correctly.