Picture yourself a nice navigation-bar. Not a standard bootstrap unit, a custom one. Nice color, white text. It has some nice dropdowns in it. A logo. Some notifications. Some navigation buttons. There is something a little off. You can’t pinpoint what it is, but when you resize the browser-window it is all over the place. Twitching, misaligned and not responsive. Let’s have a look at the template. Not much wrong here… all nice div’s in a nav-element container. Moving on to the styles… we spot a navigation-bar and some elements in it. It looks like the best intention was used. But the whole thing ended up in a guess between fixed, absolute and relative displayed elements. In desperate act to save the navbar it was displayed flex to keep it together… This could use some basics.
2 months ago, we spotted within our company that all our developers could use some polishing up on their CSS/styling skills. Like me everyone was busy all the time. Very busy. All week. To solve this, we came up with ‘The style fact of the week’. One styling concept each week in 5 minutes, explained in full, on the whiteboard, optional Q&A afterwards. Things you did know, partly knew or did not know about what you can do with CSS. This blog series will be about the topics we come across in our ‘The style fact of the week’.
In this first style fact blog I will start with the basics: positioning element on the screen. The one thing that is the cause for the design to break or twitch. Especially when a browser window is resized. Not all developers are clear on what to use when. Most of the time display:flex is used as ducktape for the ‘there! I fixed it!’-short-term solution. A more long-term solution might be to read this article and really understand what to use when positioning elements. Here’s how you can solve positioning issues so that everyone understands how you did it. Clean and simple, in readable code. Without display: flex…
Let’s dive into the CSS.
In CSS we have 2 main tools for positioning elements and defining their behavior. The first is style attribute ‘display.’ We will cover ‘display: block’, ‘display: inline’ and ‘display: inline-block.’ The second is position. Like expected the ‘position’-attribute will help us position things. In this blog I will explain ‘position: relative’, ‘position: fixed’, and ‘position: absolute.’ The last one a has somewhat confusing about it, but with a little explanation you will understand why.
The first box you ever put in a hello world application is probably a block. You can give it a height and width and position it and see it. Div’s you use in most applications have display: block by default. It does need to be specified in files scripted from scratch. Display: block is used to make a box within a container that is the only one in its container-element. Even if others fit next to it. Like this:
You can see inline as short for in the line of text. Besides text (like h1, h2 or p) elements like span are inline elements as well. Div’s can be anything. This means they can be displayed inline too. The content of the div behaves like a text element in this case:
If you want more boxes in a row inside your container you can use inline-block. Like inline-block suggests it means blocks inline of each other. Most people are confused when they place 2 inline-blocks in a container and they are not positioned next to each other instantaneous. The reason this does not happen right away is that your browser does not know how wide your freshly created inline-blocks are: (expected/reality)
To make them show up in the same row. You will have to specify width (including padding and margin) and added they cannot be over 100% of its container width. When your design breaks this is often the problem. Another issue may be that your browser does not know how the inline-blocks are vertically positioned. This can be solved by specifying ‘vertical-align:top’ in all inline-blocks. Do not use ‘display:flex’ for positioning blocks inline. The only reason to use flex is for evenly spaced vertical and horizontal surfaces. I will leave the ‘flex’-display for later, because of the complexity using it.
All elements without specified position are positioned relative. Like ‘display: block’, this means you do need to specify this explicitly one some div’s. position relative means it is positioned relative to its parent container, like the following picture:
By default, this in the top left corner of a parent container.
Navigation should always be available in the screen in a top or bottom position. This is when you use position:fixed. With attributes like left:0; and top: 0; you can fix an element in the top of your browser window. When scrolling the page this will not affect the position of the element, because you scroll the page and not the window:
Absolute positions itself relative to the first parent that is positioned relative explicitly. A parent that is positioned relative by default without specification will not suffice. This needs to be specified explicitly. When not specified the element will absolute position itself relative to the parent of the parent and so on until it find a parent that has a specific ‘position:relative’-attribute:
The examples I used in this blog you can find in this position pen and this display pen display pen.
These are the most commonly used position and display types. There are more options to explore. I will do this in other parts of these ‘style fact of the week’-blog series. If you want to know more about styling, please keep an eye out for our styling updates. They will be about one or more topics I explain in our office weekly. Ranging from basics to more complex concepts.
You now know the difference between relative, fixed and absolute positioning. Relative is positioned to its container. Fixed is relative to the browser window. Absolute is relative to the page. You know that the latter can have different places because it positions itself relative to the last element that is positioned relative.
You now know that a block is used to position one element on a row. This means without elements next to it.
Inline positioning is mostly used for text and used for elements which are not supposed to be styled as blocks.
And If you want block elements in the same row, you should use inline-blocks.
Most important thing to remember is that the widths of all blocks in a row should not exceed 100% width of its container element.
Like the Dutch say: If you are ever standing in front of the block, you will know how to position that element correctly.