Decoding CSS Positioning: A Master Class with Paul O’Brien
Positioning elements on a web page can seem maddeningly difficult at times, especially given all the various methods available. And the options continue to expand, with the introduction of flexbox and grid layouts, as well as cool things like CSS3 transforms, which can also be used for amazing layout tricks.
In this forum dCode, CSS expert Paul O’Brien answers anything and everything about the tricky subject of CSS positioning — from floats and relative, absolute and fixed positioning to table display and even flexbox.
If you have any questions about CSS positioning, please join the conversation!
About dCodes
Our Forum dCodes are topics that feature a guest who conducts a deep dive into a subject area. Unlike our Q&A sessions, which run for just an hour, dCode topics stay open over a long period, so that issues can be discussed at greater length and in greater depth. You can ask questions, or just sit back and follow along, over time, as the guest answers questions and posts content of interest.
About Paul
Paul O’Brien is a widely recognized expert in all things CSS. He co-authored the landmark tome The Ultimate CSS Reference, and for many years has been a guiding light for many a developer wandering through the dark forests of CSS.
Have you heard of containing floats with overflow: hidden or similar? It was Paul who unearthed that technique back in the day.
If something can be done in CSS, Paul will know how to do it. He even regularly points out how to do things people thought weren’t even possible.
Paul’s Topic Starter
To start the thread off, Paul has created a small demo that simply places a small 50px fixed width and height red box to the right of the page. The html is basically as follows:
<div class="wrap">
<div class="box">Box</div>
</div>Before you look at the demo take some time and see how many ways you can think of doing this?
You may immediately think of about 3 ways to do this but as you delve into the details you find that there are in fact many ways to do this and in the demo I stopped at 15 but I wouldn’t be surprised to see quite a few ways I hadn’t thought of cropping up!
Here’s my demo and see if you can come up with other ways to do this:
See the Pen Box to the right by Paul O’Brien (@paulobrien) on CodePen.
The point of the exercise was simply to show that in CSS there are often many ways that a layout can be achieved and often the solution depends on what comes next as to what method is best to use. I often say that “the beauty of CSS is that there are many ways to do the same thing” but the difficulty for beginners is knowing which is the right way for the job in hand.
Now that you have looked at the demo (be honest here) how many of you thought of or understood the very first method in the demo?
This was the simplest and most basic answer and probably one of the first lessons learned and forgotten by most people and I will guess that few of you will have thought of it.
.box {margin:0 0 0 auto; width:50px; height:50px;background:red;}It looks simple enough but how does that put a box to the right of the page?
We are all familiar with margin:0 auto which will center block elements horizontally but how does margin:0 0 0 auto; move a box to the right?
To answer this you need to refer to the specifications but a simplified example is that the width + padding + margins = width of the containing block.
Therefore, for a fixed width element that has a right margin of zero then the left margin must equal the distance left to the left edge of the containing block. This is achieved with a margin-left of auto.
If instead you put a margin-left of zero then the box moves to the left side and in ltr languages the margin-right zero would then equate to auto (even if you specify zero) in order for the requirements of the box model to hold true.
lastly if you put a margin-left and margin-right of auto then the box becomes centered as we all know and love.
(I have simplified the answer so read the specs for full details and understanding.)
I mention this auto margin technique because it is a prominent technique when using flexbox and an auto margin on a flex-item will move that element to the edge of the box (whether that be left , right up or down). Incidentally it is not well known that margin:auto on an absolutely positioned element will center the element both horizontally and vertically within a fixed height and width container.
That’s enough about margins anyway and have a look through the rest of the examples in the first demo and if you can think of more ways to do this then feel free to post or discuss.
If you don’t understand any of the examples then please discuss and we can clarify.
Note that this thread isn’t simply about this first post but mainly as a talking point to keep things moving so if you have topics you wish to discuss then please go ahead.
I look forward to answering or being baffled by your queries. I can’t guarantee to know all the answers but I’m sure if I don’t know the answer someone else will have a good idea and chip in to the conversation.