CSS, with its many quirks, is a crucial leg in what I like to think of as the “Front End Tripod” (HTML/CSS/JS). I remember what it was like trying to learn how to start laying out pages using CSS. I think this gif sums up my experience nicely. 

Once I learned how to look at a site design and start thinking through how I would build it out it was time to do exactly that. Instead of writing another lengthy article trying to explain the position property or floats as an example, I wanted to share a website that really helped me grok some fundamental concepts in CSS layout. That site is so aptly named learnlayout.com

I highly recommend taking the time to read through this site. They do a good job of visually supporting the topics covered that I feel were useful when trying to understand some of these concepts. As with anything in programming, you have to just try and break things to really wrap your head around what each does. Go pick a site you are fond of and see if you can’t apply some of the properties coverd on learnlayout.com to rebuild the visual appearance of that site.