@AlexBueckig
Posted
Hey Kingsley,
I noticed you are still using float to position your elements. Since we have Flexbox and Grid nowadays this kind of positioning is outdated and barely anyone uses it anymore because it is way to complicated and prone to errors. If you really want to improve on web development and level up your skills I'd really advise you - since you already know the basics of HTML and CSS - to start off with learning flexbox. Flexbox is such a powerful tool and is definiately considered best-practice in todays web-development workflows!
Here are some great resources you can learn from. https://www.frontendmentor.io/resources I personally took the free Flexbox course by Wes Bos and I can totally recommend it!
But coming back to the original problem, why seem your social icons to be out of the container...? Actually... They are still inside the container and what is happening is the expected behaviour of using floats in this use case.
If you float an element inside a block-level element (e.g. your div) it gets taken out of the flow and gets pushed to the right until it hits the border of the containing content-box (in your case your .bottom-container). Since the social icons are now taken out of the flow your .bottom container doesn't have any more children which could give it a height and so the height collapses to 0. It seems kinda weird... But that's how floats works...
Since floats inside floats work differently you could also float your .bottom-container to the left or right, remove the margin and re-add it to the .socials container...
Edit: @argelomnes already mentioned 2 different - in my opinion better solutions - to your problem. Definiately have a look at them! 😃
@ifeanyimuogbo
Posted
@AlexBueckig Thanks for the recommendations. I'd refactor soon.
