Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

Assignment on house Painting: 44. Your #chimney should have a top value that puts it at the top of your #house.

Your code so far

<!-- file: index.html -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>House</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>

/* file: styles.css */
#house {
    position: relative;
    width: 500px;
    height: 400px;
    background-color: lightblue;
    border: 2px solid black;
}

#house > div {
    position: absolute;
}

#chimney {
    width: 50px;
    height: 70px;
    border: 1px solid #333;
background-color: gray;
    top: 80px; 
    left: 150px;
    z-index: -1;
}

#roof {
    width: 400px;
    height: 100px;
    border: 2px solid #333;
    background-color: brown;
    top: 0;
    left: 50px;
}

#window-1 {
    width: 60px;
    height: 60px;
    border: 2px solid #333;
    background-color: yellow;
    top: 120px;
    left: 100px;
}

#window-2 {
    width: 60px;
    height: 60px;
    border: 2px solid #333;
    background-color: yellow;
    top: 120px;
    right: 100px;
}

#door {
    width: 80px;
    height: 120px;
    border: 2px solid #333;
background-color: brown;
    bottom: 0;
    left: 210px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Build a House Painting - Build a House Painting

2

The point is:
The bottom of the chimney and the top line of the rooftop should be on the very same line.

You have to calculate with your chimney height and push it up with the proper attribute.
You can use negative value too in certain cases.

3

Thank you very much! That was exactly the solution. I apppreciate it.

1 Like