CSS for a calculator

I've a small assignment to do: style a given HTML file with CSS.

My result looks exactly as it should. But I'm not really satisfied with my style sheet. I'm sure there are better ways to achieve the same.

The different sizes are not specified. I had just an image as template.

How would a real web design solve this task?

jsFiddle



body > div {
width: 404px;
border: 1px solid black;
padding: 8px;
}

.header {
margin-bottom: 5px;
}

.header input {
width: 400px;
height: 40px;
border: 1px solid black;
text-align: right;
}

.numberFields {
margin: 0;
width: 360px;
font-size:0;
overflow: auto;
float: left;
}

.numberFields input {
background-color: green;
border: 1px solid black;
width: 120px;
height: 40px;
}

.numberFields input[name="0"] {
width: 360px;
}

.operations {
margin-left: 4px;
width: 40px;
font-size: 0;
display: inline-block;
}

.operations input {
background-color: purple;
border: 1px solid black;
width: 40px;
height: 40px;
}

.sum {
margin-top: 5px;
}

.sum input {
background-color: purple;
border: 1px solid black;
width: 404px;
height: 40px;
}





























First, your CSS has no errors, which is very good. You can check for errors at the W3C validator.

Looking through your CSS, it looks very neat, and I would only remove a little bit of unnecessary code. Also, the display seems to be optimized for IE. I set it for FireFox and Chrome, and it displays almost correctly in IE. The trouble is, the box for displaying the output is visibly small in FireFox and Chrome. With my changes, it is 1 pixel too large in IE, but it is not as noticeable.

First, I would just use the body element here, instead of body > div:

body > div {
    width: 404px;
    border: 1px solid black;
    padding: 8px;
}

Right here, I adding a small padding so the font would have a small amount of space between it and the border:

.header input {
    /* ... */
    padding-right: 2px;
}

I found I could remove the overflow: auto; lines without effecting the display.

In .operations, you don't need to set font-size: 0;. I do not know why you need to do that to remove the spacing in the .numberFields class, but I was unable to get it working without it. I do not like that as it is not clear why you need to set the font-size there, and there is probably a cleaner way to do it, but the usual trick of using a negative margin value isn't working, and neither did setting the padding to 0px.

I did not make any other changes; as I said above, your CSS is very clean and neat.

StackExchange Code Review Q#83029, answer score: 2