Embed the div into the div. They are on the same hierarchy.
<div>
<div>
</div>
</div>
Solution 1 :
Solution 2 :
If you want one div on top of the other do it like this:
<html>
<head>
<meta charset="utf-8">
<title>CSS learning</title>
</head>
<body>
<h1>CSS Tutorial</h1>
<div style="width:90px; height:90px; background-color:blue;">
</div>
<div style="width:100px; height:100px; background-color:red;">
</div>
</body>
</html>Solution 3 :
You have to understand the css position. Here in short: If you set position: absolute of any element, it will position absolutely according to the nearest parent which has the position property of relative. So, if you want to stack one div to another – you need to give their parent position of relative, And give them/one of them position of absolute.
<div>
<div style="position: absolute; top: 0; left: 0; background-color: red; height: 150px; width: 150px"></div>
<div style="background-color: green; height: 150px; width: 150px"></div>
</div>In this case the parent div has the position of relative by default.
Problem :
I am learning basic css, I’ve got a basic understanding of html. I was watching a YT video on css and cannot get my code to replicate what is shown on the screen. I’ve tried for an hour now. I’m sure it’s something super simple, but you don’t know what you don’t know kind of thing.
I’m trying to get 2 colored blocks to stack one then the other. but they’re just stacking on top of each other. I typed out my code just like it showed on the video. @ https://www.youtube.com/watch?v=_0Z1oNQ93Wo&list=PLLAZ4kZ9dFpNO7ScZFr-WTmtcBY3AN1M7&index=7
my code is:
<html>
<head>
<meta charset="utf-8">
<title>CSS learning</title>
</head>
<body>
<h1>CSS Tutorial</h1>
<div style="width:90px; height:90px; background-color:blue;">
<div style="width:100px; height:100px; background-color:red;">
</body>
</html>the red block is covering up the blue one, and not stacking on one another like in the video.
Comments
Comment posted by Tushar Shahi
Welcome to SO. If you have the option try to use the code snippet instead of code block. I did that for you this time. You can see it is better
Comment posted by Spectric
You are missing the closing
Comment posted by Tushar Shahi
@Spectric can’t blame. I jumped through the video and the screen never shows them.
Comment posted by developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
Divs are block level elements
Comment posted by AB7zz
ha man don’t feel bad. This is how we learn. And trust me, there are quite a few experienced people who still face difficulty in centering a div lol