CODEWITHSUNDEEP
javascriptjquerycss
Ruhul
Ruhul

Reputation: 1030

jQuery how to set the position of a div with relative to another div?

I am having below two divs inmy html, 

<div id="chart-2" class="graph"></div>
<div id="chart2Buttons"></div>

First div represents the graph which I am plotting using highchart.js while second represents the buttons which I am supposed to place under first div as show in below image. enter image description here

Can you please help how can I achieve this to place my second div at the bottom-right corner of first div?

Thanks

Upvotes: 0

Views: 55

Answers (3)

z0mBi3
z0mBi3

Reputation: 1544

Add a wrapper div to the chart and button and set the display to inline-block and position relative for the wrapper. Position absolute the button and place it at bottom corner as below

.graph{
  width: 400px;
  height: 400px;
  background: crimson;
  line-height: 400px;
  text-align: center;
  color: white;
  font-size: 20px;
}

.wrapper{
  position:relative;
  display: inline-block;
}

#chart2Buttons{
  position: absolute;
  width: 40px;
  height: 40px;
  right: 0;
  bottom: 0;
  background: cornflowerblue;
  color: white;
  line-height: 40px;
  text-align: center;
}
<div class="wrapper">
  <div id="chart-2" class="graph"> GRAPH </div>
  <div id="chart2Buttons">B</div>
</div>

Upvotes: 0

Nikolay Ermakov
Nikolay Ermakov

Reputation: 5061

Add css rule:

#chart2Buttons {
    display: inline-block;
    float: right;
}

Upvotes: 1

Sabith
Sabith

Reputation: 1656

Try this CSS:

#chart-2{
  position:relative;
}

#chart2Buttons{
   position:absolute:
   bottom:1px;
   right:1px;
}

Upvotes: 0

Related Questions