CODEWITHSUNDEEP
htmlcss
Linto Thomas
Linto Thomas

Reputation: 61

How to place content below a position absolute item without affect div changes

I have html div like

div A            

div B

Div D
div c
Div E

i want structure like

div A           Div C

div B           div D
Div E

i did for 

.c {
    top: 0;
    right: 220px;
    position: absolute;
}

now div c is in top,Next i want Div D

.d {
top: 566px;
position: absolute;
right: 291px;
}

i can adjust this but problem is that when i extend content from Div c it will overlap to div D?How can i move Div D under Div C?please help

Here is my code

<div>
  <ul>
    <li>
      <h3>Our Team</h3>
    </li>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li style="top:20px; position:absolute; right:120px">e</li>
    <li style="top:20px; position:absolute; right:120px">f</li>
  </ul>
</div>

Upvotes: 3

Views: 125

Answers (3)

Kleber Germano
Kleber Germano

Reputation: 770

You can use CSS Grids if you just want to adjust the content [Updated]I was warned that you want a specific position so I made the changes that can solve the problem

main{max-width: 1170px; margin:0 auto; background:#f8f8f8; min-height:100vh;}

.grid-div div { border:1px solid #ccc;  background: #f0f0f0; min-height:150px; }

.grid-div {

		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-gap:20px;


} 

.a{grid-column: 1; grid-row: 1; }
.b{grid-column: 1; grid-row: 2;  margin-top:60px; }
.c{grid-column: 2; grid-row: 1; }
.d{grid-column: 2; grid-row: 2;  margin-top:60px; }
.e{grid-column: 1; grid-row: 3; }
.f{grid-column: 2; grid-row: 3; }
<DOCTYPE html>
<html>
<head>
<title>Grid Test</title>
</head>
<body>
<main>
<div class="grid-div">
  
   <div class='a'>A</div>
   <div class='b'>B</div>
   <div class='c'>C</div>
   <div class='d'>D</div>
   <div class='e'>E</div>
   <div class='f'>F</div>


</div>
</main>
</body>
<html>

if you want to check more options to use in grid see here https://www.w3schools.com/css/css_grid.asp

Upvotes: 0

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

You Can use CSS Grid Instead:

Complete Grid Guide

First Define your Grid Template Areas: 

grid-template-areas: "i1 i3" ". ." "i2 i4" "i5 .";
grid-template-rows: repeat(4,1fr);

grid-template-areas: Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property

each "" refer to row.

For example: first row have two columns:

1- i1 takes 1 of 2 from the first row.

2- i2 takes 1 of 2 from the first row.

grid-template-rows: repeat(4,1fr): will make sure that all rows have same height (even empty ones).

To apply this area to div:

1- Define the div in html: 

<div class="item i1">Div A</div>

2- add to css: 

.i1 { grid-area: i1}

and so on.

Working Demo: 

.grid {
  display: grid;
  grid-template-areas: "i1 i3" ". ." "i2 i4" "i5 .";
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  margin: 25px;
}

.i1 {
  grid-area: i1
}

.i2 {
  grid-area: i2
}

.i3 {
  grid-area: i3
}

.i4 {
  grid-area: i4
}

.i5 {
  grid-area: i5
}

.item {
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}
<div class="grid">
  <div class="item i1">Div A</div>
  <div class="item i2">Div B</div>
  <div class="item i3">Div C</div>
  <div class="item i4">Div D</div>
  <div class="item i5">Div E</div>
</div>

Upvotes: 3

Charlene Vas
Charlene Vas

Reputation: 731

You can use columns are rows to create that layout

Demo: 

.column {
  float: left;
  width: 50%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}
<div class="row">
  <div class="column">
    <div class="a">div a</div>
  </div>
  <div class="column">
    <div class="c">div c</div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="b">div b</div>
  </div>
  <div class="column">
    <div class="d">div d</div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="e">div e</div>
  </div>
</div>

Upvotes: 1

Related Questions