Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

Problems with:
42. Your #door should be placed at the bottom of the house.
44. Your #chimney should have a top value that puts it at the top of your #house.
The door is exactly on the line of the border of the house and the chimney is exactly in line with the roof. The roof, being set as required at “0” is slightly below the top of the house. I’ve tried to align the chimney with the top of the house as well and it still fails.
I’ve played with each of these settings by + or - w/o success.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>House Painting</title>
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <div id="house">
    <div id="chimney"></div>
    <div id="roof"></div>
    <div id="window-1"></div>
    <div id="window-2"></div>
    <div id="door"></div>
    </div>

</body>
</html>

#house {
  position: relative;
  top: 300px;
  left: 15px;
  border: 2px solid black;
  width: 500px;
  height: 400px;
  background-color: brown;
  z-index: 2;
}

#chimney {
  position: absolute;
  top: -53px;
  left: -1px;
  background-color: tomato;
  border: 2px solid black;
  height: 50px;
  width: 30px;
  z-index: 1
}

#roof {
  position: absolute;
  top: 0;
  left: -13px;
  background-color: bisque;
  height: 3px;
  width: 525px;
  border: 2px solid black;
}

#window-1 {
  position: absolute;
  top: 150px;
  left: 25px;
  background-color: cornsilk;
  border: 2px solid black;
  width: 100px;
  height: 150px;
}

#window-2 {
  position: absolute;
  top: 150px;
  left: 375px;
  background-color: cornsilk;
  border: 2px solid black;
  width: 100px;
  height: 150px;
}

#door {
  position: absolute;
  top: 198px;
  left: 210px;
  background-color: darkkhaki;
  border: 2px solid black;
  width: 75px;
  height: 200px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:144.0) Gecko/20100101 Firefox/144.0

Challenge Information:

Build a House Painting - Build a House Painting

https://www.freecodecamp.org/learn/full-stack-developer/lab-house-painting/build-a-house-painting

1 Like
Build a House Painting - Build a House Painting
2

For the failing user story 42, I would remove the top property and use bottom instead.

When I did that the test passed

For user story 44, I would suggest reading through this post where they had the same issue

That discussion should help you reach a solution

hope that helps

1 Like
3

Well, using the bottom setting rather than top and making that 0 fixed the door problem. But using the bottom property for the chimney doesn’t work. I’ve tried 400, which is the height of the house up to 403, but at 403, the chimney has air between it’s bottom and the top of the house.

I did read that forum about the chimney but nothing in it helps me resolve this issue.

Here is the current code for the chimney:

#chimney {

position: absolute;

bottom: 402px;

left: -1px;

background-color: tomato;

border: 2px solid black;

height: 50px;

width: 30px;

z-index: 1

}

Screenshot 2025-10-18 at 9.41.16 PM
Screenshot 2025-10-18 at 9.41.16 PM645×603 1.13 KB

4

For the failing chimney user story, using the top property is the right way to go. The bottom property was only for that failing door test

For the chimney issue, you have set a height: 50px;

This part of the post I sent seemed the most helpful

that means that if your chimney is 100px high, you need to move it 100px upward

So in your case, since your height is 50px, you need to move it 50px upward. How can you do that by removing the bottom: 402px; and instead using the top property?

once you change that, it should pass

1 Like
5

I already watched a video on this at https://www.youtube.com/watch?v=X0Qrq4V4lJw&t=2560s. He had a height of 100 for the chimney and a top of -100 for the chimney. It looks exactly the same as when I did it, but it worked. Not sure why.

1 Like
7

The test is looking for the negative of its height. Or close to it. So you could have written 30 for the height and had the negative of that for the top and still passed the test.