messing up with heights

Question

I know this has been asked many times but I can't get anything to work. So I'm trying to make this page with 6 "blocks", exctacly 2 rows and 3 columns. It works perfectly with no doctype declaration, and it looks life this. But if I put it in the code this happens.

The CSS code that defines each block properties is the following:

.block {
    position: relative;
    width: 33.33333%;
    height: 50%;
    float: left;
    padding: 0;
    overflow: hidden
}

The head and the body are also set like this:

html, body {height: 100%}

Please tell me there's a solution to this that doesn't involve the use of fixed positions for each block.

It's litterally at the beginning of the code. If it helps I could post the structure of a block. — Alex, Dec 03 '15 at 23:27
EDIT: putting it inside or down the header seems to do the trick, but I wonder if it is correct to do so? — Alex, Dec 03 '15 at 23:34
I checked on Chrome, Firefox and IE, and all of them so far react like that — Alex, Dec 03 '15 at 23:41
Post the top to the bottom of head. Can't help without seeing it. Edit your question — Hyra Power, Dec 03 '15 at 23:43
_“putting it inside or down the header seems to do the trick, but I wonder if it is correct to do so? ”_ – of course not. — CBroe, Dec 03 '15 at 23:45
Possible duplicate of [Why does my div height 100% work only when DOCTYPE is removed?](http://stackoverflow.com/questions/32214152/why-does-my-div-height-100-work-only-when-doctype-is-removed) — Michael Benjamin, Dec 04 '15 at 00:54

score 0 · Accepted Answer · answered Dec 03 '15 at 23:43

0

I've just tested this and it works fine. I'm not sure what you have wrong, maybe you've accidentally missed something or have a typo?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {height: 100%}
        .block {
            position: relative;
            width: 33.33333%;
            height: 50%;
            float: left;
            padding: 0;
            overflow: hidden
        }
    </style>
</head>
<body>
<div class="block" style="background-color: aliceblue"></div>
<div class="block" style="background-color: cadetblue"></div>
<div class="block" style="background-color: azure"></div>
<div class="block" style="background-color: aquamarine"></div>
<div class="block" style="background-color: aqua"></div>
<div class="block" style="background-color: antiquewhite"></div>
</body>
</html>

answered Dec 03 '15 at 23:43

partypete25

4,353
1
17
16

I just found out that it was caused by the use of a section tag inside the body tag. I wouldn't have ever imaged it could be caused by that and I really don't understand why this happened. Even thought you didn't post the soluction to this directly, you helped me to notice what the problem was caused by, so really thank you a lot – Alex Dec 03 '15 at 23:54
Hi @alex you then need to set the section height to 100% as well! – partypete25 Dec 04 '15 at 00:09
I would then think, that because you didn't declare your doctype as html5, section was being ignored. So when you added your doctype, section was recognised but because you didn't set the height to 100% it was then not working the way you wanted. – partypete25 Dec 04 '15 at 00:11

messing up with heights

1 Answers1