How can I position one element below another?

Question

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?

What do you mean by your `under`? do you want to hide? – Jyothi Babu Araja Nov 18 '16 at 12:03 — Jyothi Babu Araja, Nov 18 '16 at 12:03
No I mean After The First element from bottom – khalid J-A Nov 20 '16 at 11:26 — khalid J-A, Nov 20 '16 at 11:26

score 34 · Accepted Answer · answered Nov 18 '16 at 12:14

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>

Banzay · Answer 2 · 2016-11-18T12:11:48.887

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>

score 5 · Answer 3 · answered Dec 17 '19 at 15:52

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

answered Dec 17 '19 at 15:52

jumpOnCommand

97
2
8

score 1 · Answer 4 · answered Nov 26 '22 at 19:28

Alternatively, you can put "display: block;" in the class style description and it will cause elements of that class to take up the whole width of the screen. So an element created after an element that has "display: block" will automatically be created below it.

 .first{
     display: block;
     width:70%;
     height:300px;
     border:1px solid red;
 }
.second{
    display: block;
    border:2px solid blue;
    width:40%;
    height:200px;
}

<div class="first"></div>

<div class="second"></div>

Pinqode · Answer 5 · 2022-06-28T12:43:25.973

One way to position a div under another div is to put the second div inside the first div and style the second div with top: 100%; and position: absolute;. The first div should have position: relative;

.first{
     width:70%;
     height:300px;
     position: relative;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:100%;
    height: 200px;
    position: absolute;
    top: 100%;
    left: 0;
}

<html>
<head>

</head>
<body>
<div class="first">
  <div class="second"></div>
</div>

</body>
</head>

score 0 · Answer 6 · answered Jan 28 '23 at 17:03

0

use grid layout in parent class. And then add a property place-items: center;. Happy coding :).

answered Jan 28 '23 at 17:03

sethugs63

1
2

2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 30 '23 at 13:01

How can I position one element below another?

6 Answers6

Linked