Adding ruins alignment

Question

I forgot to add <!DOCTYPE html> to some projects so I went back and added it. This ruined the alignment/height of a few elements but I was able to fix it by adding in px or % where it was missing.

However, in one of my projects this didn't fix the problem. Here's the fiddle. It's the button heights which should fill the entire container. It works great without <!DOCTYPE html>. I have looked at other similar questions but the advice given (add in missing px or %) hasn't worked.

Here's the CSS for the buttons:

button {
    padding: 0px !important;
    margin: 0px !important;
    height: 15% !important;
    width: 25%;
    display: block;
    float: left;
    background-color: #F8B8B8;
    border: 1px solid #fee;
    border-bottom: none;
    border-left: none;
}

Do not use id like classes, id MUST be unique for entire document — Sojtin, Oct 03 '16 at 11:16
This may also help: http://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Oct 03 '16 at 11:27

Guruling Kumbhar · Answer 1 · 2016-10-03T11:48:03.933

1

percentage is work according to the height of the parent container, so you should mention height to the #buttons ( buttons container div).

see below css -

#buttons {
    height: 75%;
}

#buttonrow {
    height: 20%; /* you have 5 rows, so it will be 20% */
}

#buttons button {
    height: 100% !important;
}

edited Oct 03 '16 at 11:48

answered Oct 03 '16 at 11:18

Guruling Kumbhar

1,039
1
8
18

score 1 · Accepted Answer · answered Oct 03 '16 at 11:18

1

https://jsfiddle.net/tn3z9e6k/4/

.buttonrow { // created from #buttonrow
    width: 100%;
    padding: 0px;
    margin: 0px;
    height:calc(400px / 5); // total height / rows
}


button {
    padding: 0px !important;
    margin: 0px !important;
    height: 100% !important;
    width: 25%;
    display: block;
    float: left;
    background-color: #F8B8B8;
    border: 1px solid #fee;
    border-bottom: none;
    border-left: none;
}

answered Oct 03 '16 at 11:18

Sojtin

2,714
2
18
32

1

This worked, thanks! The only issue is that it made the calculator too long, so instead of `height: calc(400px / 5);` I used `height: calc(400px / 6.5);`. – nonono Oct 03 '16 at 11:30
i use `calc()` only for readability reason, since there was 5 rows of buttons you can use normal value in pixels/em/rem etc. – Sojtin Oct 03 '16 at 11:34

score 1 · Answer 3 · answered Oct 03 '16 at 11:20

Fiddle:

https://jsfiddle.net/KiranKumarDash/w3xshybk/3/

The problem is not with the DOCTYPE declaration. You have not set the height of divs properly.

You had set the height of the div with id calcbox to 400px.

But the next child div with id buttons is not taking the full height of calcbox. So, I assigned 100% height to it.

Then I have assigned 20% height to #buttonrow so that the 5 rows take 20% each of the total height.

Then I added 100% height to buttons.

(Your mistake: adding 15% height to button will not take 15% of 400px but will take 15% of it's parent i.e. buttonrow . )

https://jsfiddle.net/KiranKumarDash/w3xshybk/3/

Adding ruins alignment

3 Answers3