18

I want to put one element under another element. I am using position: absolute in CSS.

 .first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
}
    <div class="first"></div>
    <div class="second"></div>

I want the blue box to be positioned under the red box. How could I achieve this?

stevelove
  • 3,154
  • 1
  • 20
  • 28
khalid J-A
  • 478
  • 1
  • 5
  • 19

3 Answers3

23

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>
Mudassar Saiyed
  • 1,018
  • 7
  • 20
9

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>
Banzay
  • 8,870
  • 2
  • 22
  • 43
5

Try using clear: both;.

The clear property specifies on which sides of an element floating elements are not allowed to float.

https://www.w3schools.com/cssref/pr_class_clear.asp

jumpOnCommand
  • 97
  • 1
  • 8