One term that keeps coming up in the design community as a stand-in for layout is “box model”, for example in “Why don’t design tools have the box model?” The CSS Box model is a well-defined term though, and it does not do layout. If we keep referring to our imaginary perfect layout system in design…
Absolute positioning Vs. floats
It seems that there is a divide between people saying you should use absolute positioning and people saying you should use floats, both claiming that the other method breaks faster.
They’re both right.
Of course, it’s all about when you use which method. In some cases, absolute positioning breaks faster and it’s better to use floats, while in other situations it’s better to use absolute positioning because floats would break the layout. luckily for us, there is one very simple rule:
If elements should not interact, use absolute positioning, if they should, use floats.
It’s that simple. Lets take this site for example. The searchform in the top right uses fixed positioning (which mostly behaves like absolute positioning) because it will, and it must, never interact with the other elements on the website. However if you scroll down to the footer, you can see 4 lists next to each other. It’s entirely possible that there are only two or three lists available. In that case, you do not want a gap on the left or in the middle, you want the elements to interact and line up nicely starting from the left. That’s what floats do for you.
If you want a more in-depts explaination of css positioning, check out my articles on them:
- Understanding CSS positioning, part 1
- Understanding CSS positioning, part 2
- Understanding CSS positioning, part 3
So, now you know that it’s not black and white (It’s grey!). There are times when you use floats, and there are times when you use absolute positioning. In my opinion, correctly styled floats are much more robust than absolute positioning, so I personally tend to use them more. How about you?
It’s important for FromScratch to be able to support different contexts. …
If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo elements.…