CSS Floats 101

CSS Floats 101 by Noah Stokes taught me a lot about setting up a multi-column layout for web design. When working with floats last week, I forgot about the other properties that come along with floats besides floating “left,” “right,” and “none.” I learned what floating “inherit” means–taking the float value of a parent element and I remembered the importance of using clear, which works hand in hand with floats. Using the clear property is helpful for laying out footers and other elements that want to be back in the normal flow.

Seeing the examples of the different layouts Stokes provided was very helpful in understanding how floats, clear and overflow properties work. Example F was specifically interesting to me because the layout is similar to what I want to achieve for my portfolio website design. Seeing the two examples of the footer’s position helped me to better understand laying out a design in CSS easier. And I think I’m going to use this knowledge to help me with my own project.

Overall, I think this article was helpful in order to prevent some CSS messes, but I think my true learning will come from writing the CSS code on my own. That way, I can see how to apply my understanding of CSS to different kinds of content to make my ideas come to fruition.

 

This entry was posted in CSS Floats. Bookmark the permalink.

Leave a Reply