Question: I've seen there are a couple questions similar to this one but none of them seem to solve my problem.

I want a very simple design:
Two or more divs stacked on top of each other, each of them docked to the right. I'm practicing for a test on which using the float property is not allowed.

```css
body{
        width:900px;
        height:850px;
        margin-left:auto;
        margin-right:auto;
    }

    #header{
        width:900px;
        height: 225px;
        position: absolute;
        right:0px;
        border:1px solid black;
    }

    #cen{
        width: 900px;
        height: 240px;
        position: absolute;
        right:0px;
        border:1px solid orange;
    }
```

```html
<!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />

            <title></title>
            <link rel="stylesheet" type="text/css" href="main.css" />

        </head>
        <body>

            <div id="header">

            </div>

            <div id="cen">

            </div>

        </body>
        </html>
```

Now, when I only had one div (header), this worked, it was docked right. But when I add the 'cen' div it is also docked right but, instead of going underneath the 'header' div, it just goes over it.

Any ideas how to fix this?

Thanks.

Answer: 
I can see two issues here.

The first is that you're trying to use `getElementById` with elements that don't appear to exist yet ("minutes", "hours", "days"). Elements with those IDs need to exist in the DOM before they can be accessed using the `getElementById` method.

One way to address this is to wrap your current variables in `<span>` tags and give them each a unique ID that you can access later.

```
var daysElement = `<span id="days">${days}</span>`,
    hoursElement = `<span id="hours">${hours}</span>`,
    minutesElement = `<span id="minutes">${minutes}</span>`,
    secondsElement = `<span id="seconds">${days}</span>`;

```

Now if you add these elements to the `innerHTML` of the "time" element (instead of just the numbers themselves), you'll be able to target their ids and change their style afterwards.

```
document.getElementById("time").innerHTML = "Noch " 
+ hoursElement + " Stunden " + minutesElement + " Minuten und " 
+ secondsElement + " Sekunden bis zur Fertigstellung des Spiels";

```

Lastly, you'll need to make sure your order of operations is correct. Move the following code to *below* the part where you change the `innerHTML` of "time", so that the elements exist in the DOM before you try to change their style properties.

```
if (seconds == 59){
    document.getElementById("minutes").style.color = 'red';

    if(minutes == 59){
        document.getElementById("hours").style.color = 'red';

        if(hour == 24){
        document.getElementById("days").style.color = 'red';
        }
    }   
}
else{
    document.getElementById("minutes").style.color = 'black';
    document.getElementById("hours").style.color = 'black';
    document.getElementById("days").style.color = 'black';
}

```
The issue is not with JS it seems.
Can not read property style of null means style property of the object you are trying to access is null.
Please check all the document.getElementById api you are using for the elements have correct id present in html elements(that you are using in code).

Also check in your browser console accessing the element using document.getElementById api.

Please add your script at the end of the body tag so that the elements get loaded, if it is a loading issue.

Then also if it is not resolved, add debugger to the js lines and check why the element is not availble.