Hi,
This thread is about positioning elements with CSS and to get the thread started and to give you all something to think/talk about I’ve 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:
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 centre 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 centred 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 centre the element both horizontally and vertically within a fixed height and width container. (http://codepen.io/paulobrien/pen/jAzkpY)
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.