Red box isn't placed as expected
Stack Overflow Asked by Liya Thomas on November 4, 2021
I tried to do this in code pen
HTML
<body>
<div class="container">
<div class="red">
</div>
</div>
<div class="blue">
</div>
<div class="yellow">
</div>
</body>
CSS
body{
margin:0;
}
.container{
postion:relative;
height:300px;
width:300px;
background-color:green;
}
.red{
height:100px;
width:100px;
background-color:red;
display:inline-block;
position:absolute;
right:20px;
}
.blue{
height:100px;
width:100px;
background-color:blue;
display:inline-block;
position:absolute;
top:100px;
left:100px;
}
.yellow{
height:100px;
width:100px;
background-color:yellow;
display:inline-block;
position:absolute;
top:0;
}
And this is what my preview looks like
The red box even though its parent is the div with class name container isn’t placed 20px to the right with respect to the right side of the green box.
Why is that so?
One Answer
Typo error postion:relative; to position:relative;
.container{
position:relative;
height:300px;
width:300px;
background-color:green;
}
body{
margin:0;
}
.container{
position:relative;
height:300px;
width:300px;
background-color:green;
}
.red{
height:100px;
width:100px;
background-color:red;
display:inline-block;
position:absolute;
right:20px;
}
.blue{
height:100px;
width:100px;
background-color:blue;
display:inline-block;
position:absolute;
top:100px;
left:100px;
}
.yellow{
height:100px;
width:100px;
background-color:yellow;
display:inline-block;
position:absolute;
top:0;
}<div class="container">
<div class="red">
</div>
</div>
<div class="blue">
</div>
<div class="yellow">
</div>Answered by Lalji Tadhani on November 4, 2021
Add your own answers!
Ask a Question
Get help from others!
Recent Answers
- haakon.io on Why fry rice before boiling?
- Jon Church on Why fry rice before boiling?
- Joshua Engel on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- Peter Machado on Why fry rice before boiling?
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?