My life is a CSS nightmare --calculator buttons

#1

  1. Any links to fully understanding alignment of html via CSS would be helpful. Every online tutorial and their mom explains the box (element, padding, border, margin), but I continue to struggle with display of elements in relation to each other (e.g. display, vertical-alignment, float, etc.)

  2. My current specific question is in reference to my calculator skeleton.

I can’t get the bottom two rows of buttons aligned. Not sure how to best deal with the size differences. Perhaps I need to change the HTML?

#2

They get a lot of hate these days, but you might consider using an HTML table for this. (You can make cells be more than one column wide or more than one row high.)

1 Like
#3

Thanks for the quick reply! Found the colspan and rowspan attributes for tables (that’s a nifty trick to know!). I’d really love to know how to solve this with CSS, if possible, for the sake of 1. above.

#4

It would indeed make sense to use a table here. A simple CSS solution would be to make the width of .inputs exactly equal to the width that the buttons need and then use margin: auto to center it:

.inputs{
  width: 292px;
  margin: auto;
}

And the height of #equal should of course be 110px (100 + margin in between two buttons).

#5

I can’t offer much advice as to ease or suitability (because I haven’t really messed with it much) but you could also look into CSS Grid.

#6

Thanks. May I ask how you’re getting the 292? I can only get 280 = (60width +10margin) * 4buttons

Maybe i’ll try all this again later with the table for practice. Seems that’s what everybody thinks I should do (and it makes sense, given it’s naturally a tabular layout)

#7

+ 2*5margin on both sides + 2px wherever they may come from :slightly_frowning_face:

Grid is definitely a good option too, and something you will probably want to learn anyway.

#8

This is the difficulty I allude to above. Aligning elements with pure CSS in a systematic way sometimes feels close to impossible.

Will check out grid as well. Thanks again to you and @ArielLeslie for your prompt assistance. Big fan of the moderator crew! I’ll do my best to give back to the community when I see a question I can answer!

1 Like
#9

Hey @bdfoz, what you’ve made is great and works fine. This is however a perfect place for using the new CSS Grid layout. I’ve recreated the calculator input area as a 4x5 grid with gutters. Then all you need to do for the equals and zero button is make them span two cells instead of one. Check it out: https://codepen.io/geddski/pen/LQbQzV

Grid is definitely an easier way to build these kinds of layouts.

1 Like
#10

table could definitely work, especially if you need to support older browsers. If you’re ok with just the modern ones though (Safari, Edge, Chrome, Firefox) then Grid would be a better way to go.

#11

Thanks for the suggestion. I’ll check out CSS Grid soon!

#12