Results Summary using Flexbox and Barebones CSS

Community feedback

• 

  Carlos Damian Perez•1,890

  @caarlosdamianPosted over 1 year ago

  Congratulations on completing the challenge! 🎉 I have some recommendations for your code that I think you will find useful.

  Why don't two divs fit inside a parent div when I set their widths to 50%? When you use position: absolute, the child div is taken out of the normal document flow and positioned relative to the nearest positioned ancestor. This means that it is disengaged from the parent div's width, and will no longer take up space within it. As a result, even if you set the width of the second div to 50%, it will take up all the available width because it is the only child div in the parent.

  To visualize this, you can think of the parent div as having only one child div that is positioned absolutely. In this case, the child div would take up all the available space within the parent div, just like the second div does when it is positioned absolutely.

  How do I use the weights in the style guide? You can use CSS_CustomProperties and create classes with similar properties and shared across necessary items.

  Is it better to use position or margin to position elements?

  margin is used to create space around an element, either inside or outside its border, and can be used to position elements relative to their containing block. It is generally recommended to use margins for simple layout adjustments and positioning, such as adding space between elements or centering an element within its parent container. Margins do not affect the layout of other elements, and are often used to create white space or breathing room in the design.

  position is used to position an element relative to its containing block, or relative to the viewport. There are several values for the position property, including static, relative, absolute, fixed, and sticky. Using position: absolute or position: fixed allows an element to be taken out of the normal document flow, and positioned precisely anywhere on the page, even overlapping other elements. This is often useful for creating complex layouts, such as overlays, modals, or fixed navigation bars.

  In general, it's recommended to use margins for simple layout adjustments, and use positioning when more complex layout needs arise.

  I hope you find this helpful 😊 Your solution is great, and I wish you all the best in your coding journey!

  1