CSS 101: How to check if elements are directly under each other

phahahaha :D :D I thought I was the only one doing this except I was using just another browser tab

cmd+shift+4 on osx

I was shown a great, if a little old school, tip by a video editor, use a post it note.

once upon a time somebody invented calc(...)

Haha, that's great! I do the same thing but with screen capture tools (currently Snagit)

Lmao. I remember the day I learnt front end, I literally held a ruler against the monitor.

MonoSnap for OS X is really helpful for CSS stuff! Many people ask me about it. It's usually for screenshots but if you adjust settings you can use for measuring!

this is actually brilliant

@petert0th I also use this to measure pixel count between elements.

Smart! I always use a browser plug-in that allows you to draw a ruler. It's handy because it also tells you the pixels :)

This beats my method of holding a business or credit card up to the screen! :D

Urm. No offence if your a good programmer you don't need this unless your training ...

@FitzSuperUser no offense. But you must not care to pay attention to pixel perfect detail... Or you've never touched CSS beyond the basics.

@ericfledderman I can show you my projects , I make sure everything is pixel perfect ... I have a big monitor just for that 27inch

But I don't need it , why? Because I've been doing it long enough.

Because my code is consistent across the site. I know if it's out cause I can see it. But my code wont be ... Because I know the width of the elements I use.

@ericfledderman I can show you my projects , I make sure everything is pixel perfect ... I have a big monitor just for that 27inch

But I don't need it , why? Because I've been doing it long enough.

Because my code is consistent across the site. I know if it's out cause I can see it. But my code wont be ... Because I know the width of the elements I use.

@FitzSuperUser consider the very basic following examples:

1. You are comparing the measurements between the content of one modal and another.

2. You are comparing measurements between content at towards the top of a page vs the bottom of a page.

3. 27" monitor? Welcome to the club, but what if you are working remotely?

Not too having a pissing contest man but... don't be too sure that none of us have been doing this as long, if not longer than you.

There's plenty of other ways to test pixel measurements in the above examples. But to say that this is a perfectly reasonable method of doing it... or that if you know what you are doing you wouldn't... I don't think that's fair at all.

@ericfledderman the thing is trying to explain why I think this is stupid is difficult. ..

Take the original post .... The image the two containers he is lining up should have the same class ... Hence don't need lining up if you program properly.

Now we don't know what elements come before the ones showed but even then.

The central container is 1040px wide ... So you know that's the space you got to work with, I personally use % as much as possible or ems depending on situation, so using margins you ideally want to get to 100%

60% 40% ... One line
40% 30% 30% two Line. Elements line up. Cause they fill 100%

What's complicated bout that ? Why would you need to see if they line up when the math works out

I'm sure there are loads of people who have more years on me I am only 20 , but I could do all this on my 15inch laptop if needed ...

If you could explain to me a circumstance this would be needed I might understand but I've built loads of sites never needed

@FitzSuperUser see examples above.

@FitzSuperUser

@FitzSuperUser

While considering the examples above, follow these steps:

Step 1. Be I a fast paced "agile" (amirite?) environment.

Step 2. Get handed legacy code of some sort.

Step 3. You got 3 minutes to make that quick fix before you give the presentation to marketing.

@ericfledderman do you mean 1 and 2 in previous comment?

Header and footer should be same width... Unless you got loads of content.

Obviously most nowadays are full width but I mean the central container inside often is 1280px or less
Margin 0 auto centres ... So?

To me if you built the site you know the width of the elements ... If you know the widths you know they line up. So I'm entirely lost on the examples your on about ...

@FitzSuperUser keep coding grasshopper.

It'll all make sense some day.

@ericfledderman mate I'm running my own web company at 20, I know what I'm doing every client I've built a site for is overwhelming happy with my work.

I honestly think this practise of lining things up is an old style programming for ie9 and below days.

Yes I'm 20 yes I might not have the years on me but I'll happily show off my sites to prove I know what I'm doing.

@FitzSuperUser

Mate... consider more possibilities then just what your used to working with.

Again... legacy code that you didn't create is an example... think outside of your box man.

Not saying that you don't know what you're doing. I'm saying that plenty of us do too and this was a good quick tip. It's sort of arrogant to say that this isn't something you'd use because you know what you're doing.

@ericfledderman apart from legacy ... I literally cannot think why you would.

To me it sounds like something a trainee would do cause they aren't sure.

And yes I'm arrogant... I'm fully aware I am.

But I'm just trying to understand why cause it's seems to crazy to me, I mean one guy said he was using a credit card ... Another... A ruler I mean what...

The calculator is one thing ... Bit imagine if you were me someone confident in their code tries to do precise code. And you hear someone is using a credit card to make sure the containers line up... You should know they line up. One you can see it and two the math adds up so?

@FitzSuperUser okay now I don't know about the ruler or the credit card. You got me there.

I'm speaking simply for the all digital solutions like the calculator or the screen shot tools.

Hahaha, I thought I was crazy...
but I think I am, I use a piece of paper from the desk, on the screen :)))) *it's faster*

I use TextEdit... Easily resizable and less distracting color variations.