When to use columns or just padding and margin?

When to use columns or just padding and margin?
0

#1

Hello, I created two clock faces and I’ve been trying to stick to the column structure. I was wondering, for something like my clocks and their features, would it be better to stick to padding and margin? Or should I do all I can with columns and then touch it up with the other two things? The clocks’ features are not entirely centered and it was all done by eye. I was just wondering if it can be improved using simpler ways.

https://dana94.github.io/clock/

Index file:

CSS file:

https://github.com/Dana94/clock/blob/master/css/stylesheet.css

Thank you!


#2

Wes Bos has a video about creating an analog clock in his free Js30 series. It could be of help.

GL


#3

A lot of people suggest that you truly understand what you can do with padding/margin before you rely on bootstrap. If anything you’ll be able to understand what goes on behind the scenes with bootstrap.

But for absolute-positioned elements I believe you’re supposed to use top/left instead of margin-top/margin-left. top/left defines its position based on the relative parent element whereas margin will move it from where it was when it was created.

You will also stand to benefit from using calc() if you want extreme accuracy. Calc can be used for something like:

left: calc(50% - 15px);

Spacing is important in calc! calc(50%-15px) will not work.

This will perfectly horizontally center a 30px wide element because it brings an entire element starting from the left 50% of its parents width, and then shifts it half its width backwards. You might use this for the Hello Kitty face provided they’re all wrapped together.

For your clock hands you don’t even need calc. I imagine you’d need top: -50% and left: 50% or values very close to those.

Coincidentally I have an old fork of a prototype sun I was making. I wasn’t trying to make a sun dial but the design turned out similar to a clock.

http://codepen.io/jx2bandito/pen/yMVGrW

For simplicity I also recommend sizing children with the same sizing unit as their parents.


#4

I’ve never heard of the calc() and top/left methods before! Thank you.