How can I position one element below another?
just give position : relative to second div and top:315px or what ever you want
.first{
width:70%;
height:300px;
position:absolute;
border:1px solid red;
}
.second{
border:2px solid blue;
width:40%;
height:200px;
position: relative;
top: 315px;
}<html>
<head>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
</head>Here is a solution:
.first{
width:70%;
height:300px;
position:absolute;
border:1px solid red;
box-sizing: border-box;
}
.second{
position: relative;
border:2px solid blue;
width:40%;
height:200px;
top: 300px;
box-sizing: border-box;
}<div class="first"></div>
<div class="second"></div>And you can to not point position, because div is block element and will be placed at new line by default.
.first{
width:70%;
height:300px;
border:1px solid red;
}
.second{
border:2px solid blue;
width:40%;
height:200px;
}<div class="first"></div>
<div class="second"></div>