(Reading time: 2 – 3 minutes)
At some point, you will want to extend WordPress to display your own, personalized content. For example, you may have a custom design for special pages. Or you may have graphical or text elements with precise size or placement requirements. Whatever the case may be, you find yourself in the situation where you need to know a little bit more about Cascading Style Sheets, or CSS.
CSS allows a wide variety of positioning. You can position elements at absolute locations on a web page, with respect to other elements, or have elements grow and move according to the dictates of the enclosed content.
There are a wide variety of opinions about which form of position is best; you can do a search on Google or your favorite search engine if you want to dig any deeper.
Three simple rules for CSS absolute positioning
- Use absolute positioning to start out, when teaching yourself CSS positioning rules.
When you’re just starting with CSS, there is a fair bit of knowledge you need to keep in your head: how the coordinate system works, how margins and padding works, how offsets are computed. When you use absolute positioning, you can nail down exactly what you want first. Later, you can relax your constraints to learn how CSS elements can change size and float.
- Use absolute positioning when enclosed elements don’t need to float.
If your page element can be contained within a strict size, using absolute positioning inside this element makes a lot of sense. You’re creating a design “component.” While I’m not an expert on CSS positioning, I am an expert at creating software components, and the principles remain the same.
This “design component” structure is the case when you have an image background of a certain size and you want to overlay text. The internals of the enclosing div can be chopped up into exact sizes, where padding and margin are completely accounted for prior to starting to code. The enclosing element can be floated around at will, with all the enclosed elements behaving exactly as desired.
- Use graph paper to lay out the positions and sizes of enclosed elements.
Drawing out your design by hand, to scale, using graph paper and pencil will let you find margins and padding for all of your internal block elements. If you draw something too fancy, scan your drawing and send it off to a design shop for implementation.
Once you have mastered absolute positioning, take the next step into relative positions. But that’s enough for today.
