margin-right:-5px;

Hello Guys,

Thank you for the help!

Geoffrey, thank you for the thorough response. If you watch the video, around 1:33 minutes into it, Guil mentions why the secondary-columns collapses and he says that the number -5px depends on the font used, so that is the reason I believe there could be a computation behind this number. Please have a look at this video, and perhaps run the code. I am quite sure there is a way to come up with this number, I just don't know how to do it, even if we change the width size of the columns.

https://teamtreehouse.com/library/css-layout-techniques/display-modes/column-layout-with-inlineblock

HI,

There is no special computing involved -> try and see.

Giving a negative value -> moves the margin in the opposite way that it normally does.

• Positive would move the content next to the element 5px to the right.
• Negative moves the content 5px to the left.

Well I don't think there is really a way to compute the white space value. It is just around 4 5 pixels.

Negative margins is a technique that you can use to push an element in a certain direction.

So when you apply

margin-right: -5px;

the element is pushed 5px to the left

You can read about the white space on inline elemenets here. The article also show some other ways to handle the problem.

He does it because there is a white space issue when using the display property with inline-block as value. In fact to give you a quick example, if you have two div next to each other, displayed with this property, if there are whitespaces between both, that's going to be "interpreted". The result will be a gap between both div and you don't probably want it, there are several ways to fix and the negative margin is one of them.

Check this pen I created, I put some little information to help you.

This article is also very valuable, it gives all the details.

Edit: Also keep in mind there are some others existing layout technics, such as float, but this one comes with its quirks as well, there is as well flexbox which is a "flexible layout module" created to get rid of these quirks when creating layouts. Unfortunately some browsers such as IE9 don't support them at all. For more info about compatibily, check caniuse

I found solution with floating primary and secondary content, without using negative margine.

.col {
 float:left;
}

.secondary-content {
 clear:right;
}

This is the simplest example.

Sorry to high-jack this post but -5px will brake layout if users have different fontsize in browser. How can we compute to make -5px in lets say in percentage or ems?

I have read somewhere that we can set parent to font-size : 0 and then select font-size for the inline elements for example to 16px, then the space gap will be fixed with inline block. Any smart way of making it relative to fontsize just as Pavle Lucic mentioned?

In my opinion this layout with inline-blocks and negative margin should not be used. if you zoom in or out in your browser, the content breaks on certain zoom levels... it's got something to do with the way the browsers calculate pixels on those zoom levels...