This chapter covers
- Practical advice for element sizing
- Vertical centering
- Columns of equal height
- Negative margins and margin collapsing
- Consistent spacing of components on the page
When it comes to laying out elements on the page, you’ll find a lot of things going on. On a complex site, you may have floats, absolutely positioned elements, and other elements of various sizes. You may also have some layouts using newer CSS constructs, such as a flexbox or a grid layout. You have a lot of things to keep track of, and learning everything involved with layout can be overwhelming.
We’ll spend several chapters taking a close look at several layout techniques. Before we get to those, it’s important to have a solid grasp on the fundamentals of how the browser sizes and positions elements. The more advanced topics of layout are built atop concepts like document flow and the box model; these are the basic rules that determine the position and size of elements on the page.
In this chapter, you’ll build a two-column page layout. You may be familiar with this as a classic beginner exercise for CSS, but I’ll guide you through it in a way that highlights several, often-overlooked nuances of layout. We’ll look at some of the edge cases of the box model, and I’ll give you practical advice for sizing and aligning elements. We’ll also tackle two of the most notorious problems in CSS: vertical centering and equal-height columns.