Huddle landing page introductory section using plain HTML5 AND CSS3

Community feedback

• 

  Alex•1,090

  @AlexBueckigPosted about 5 years ago

  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! 😃

  1

  ---

  

  Kingsley•40

  @ifeanyimuogboPosted about 5 years ago

  @AlexBueckig Thanks for the recommendations. I'd refactor soon.

  0
• 

  argel omnes•1,800

  @argelomnesPosted about 5 years ago

  Hey Kingsley,

  "to go out of flow"- This is the default behavior when using floats. A couple of fix for this are:

  • add overflow: hidden; to .bottom-container or
  • replace float: right; with text-align: right; in .socials

  There are other ways. I suggest looking into clearfix and flexbox. Good job!

  1

  ---

  

  Kingsley•40

  @ifeanyimuogboPosted about 5 years ago

  @argelomnes Thanks argelomnes. I'd refactor

  0