The greatest CSS layout trick you've ever learned?

Just recently I came across the greatest CSS trick I think I have ever seen. It’s called box-sizing: border-box. Basically, it modifies how CSS calculates the width of elements. Normally, elements have the property box-sizing: content-box. This means that the width of the element only applies to it’s content, and any pagging or border are added outside that width. This means that any time you add padding or border to an element, you have to recalculate your margins.

But then i came across border-box. This means width now includes padding AND border. So in other words the width you define the width of the element, no ifs ands or buts!

This single modification literally fixed 90% of my layout issues, you can read up on it at CSS-Tricks here. But it got me thinking, what other layout tricks are out there that I don’t know about?!? What tricks have you come across in your travels to achieve that oh so clean layout?

11 Likes

Neat, I didn’t know about this. The one CSS trick that I remember using constantly is:

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

This gives actual centering, vertically AND horizontally. Of course, absolute positioning can be awful unless used carefully so it’s not a trick to be abused. Still, it always ends up as a mixin in my Sass files. Also useful to make your Codepen demos of small components look neat.

Of course, flex box exists, but this tends to be more browser compatible and you don’t need polyfills to use it for older browsers.

4 Likes

Oh my god I can’t wait to wikify all this !!
I’m new so I think everything I learn is wonderful : flexbox, bootstrap grid system, …everything !
Keep rolling Campers ! Can’t wait to read !

[Edit] Ok this is probably terribly basic but {height:100vh} and {min-height:100vh}really changed a lot…

4 Likes

I’m with you @timotheap I nearly wet myself when I discovered 100vh

3 Likes

@megaboy101 I’ve heard this title before but strangely I never took the time to learn what box-sizing does

Thanks, i’ll go learn this now I thinks :slight_smile:

:laughing: you do realise it’s both sad and disgusting, right? Come on, what’s your best CSS trick then?

haha

greatest trick? must admit I love flexbox… its just so flexible

1 Like

:scream:why did I not look this up??? this is so good and now I feel so dumb

In terms of tricks for getting layout

* {
    outline: 1px solid grey;
}

whilst working your layout this is invaluable to show you exactly where things end and begin, whats not going to the right width etc.

When used with Dev tools element box model hover you can figure out any layout issue.

4 Likes

That is a good way to centre things like login pop ups without the compatability headaches, which you do get with i.e11 and vertical centering with flex box.

Good tip thanks. :thumbsup:

Great topic!

I only recently found calc(), which lets you add pixels and vh’s and other units together. Like: width: calc(20vw+50px)

2 Likes

Yes extremely handy that one for when you want 100vh but have some other pesky element messing it up such as a menu or footer. @timotheap will love this one.

Can’t wait to try it out - thanks for the heads up !

1 Like

The one I use a bit to center things is

.flexcenter { display: flex; justify-content: center; align-items: center; }
its not really that hackey though :wink:

1 Like

I was impressed with “box-shadow : inset”, which allows adding a nice effect to a button. I use it now quite often, probably until I get bored with it :stuck_out_tongue_closed_eyes:

1 Like

More basic than actaul BASIC but, text-shadow made me really happy to find :slight_smile:

1 Like

As far as I know, you need to have spaces around the operator like:
calc: (100vh - 10px);
Otherwise it won’t work.
At least this is how you had to do last time I used. Maybe they changed it.

For me it must have been all the tricks with :before and :after, adding “content” properties to each. This gave me more flexibility in designing stuff where I would otherwise need to add more divs & spans.

2 Likes

Also note that you can have after, or before twice :slight_smile: or after:before and vice-versa… :smile:

1 Like

You can use this to create very flexible lines of boxes - a kind of 1-dimensional grid. The following gives 3 unequal width boxes, each with centered text, all in a row taking up the full screen width. (This works in both Firefox and Safari.)

.core{
	border:1px solid black;
  	float:left; /* if this is not there, boxes are on separate lines */
	box-sizing:border-box;	
}
.pdg{
	padding-top:20px;  /* can be % */
	padding-bottom:10px;
	height:60px;
}
<div  style="text-align:center">
<div style = "width:10%" class="pdg core" >left10</div>
<div style = "width:30%" class="pdg core" >middle30</div>
<div style = "width:60%" class="pdg core" >right60</div>
</div>

You can make any number of boxes. You can also make any box invisible, so it takes up the space but the result looks like completely arbitrary placing. To make the box invisible, do not include the border, and make the content a space - &nbsp;.

However, there may be issues with float:left.

1 Like

This sounds silly, but it’s probably display: inline-block. I never used it a lot until I did CSS Drawings for Codevember and I just enjoyed it tons.

Also, IDK if this counts as a layout trick but I’ve been really into feature queries lately. I’m in love with CSS filters but they don’t quite work on IE so this is nice.