How to center
on the bottom of the other using jQuery?

Question

I would like to do something like this:

The proportions are just for illustration, however you can use them.

I want to take the small red <div> box and append it to the bottom of the big green <div> box.

The width of both boxes is known small -> 200px; big -> 600px;

How can I do this using javascript (jQuery)?

I agree with chchrist's comment. If you're not doing this dynamically (ajax) you should edit your question to include CSS solutions and then accept @Joseph Silber's answer below. — Sparky, Aug 19 '11 at 15:30
Because I have something else below green div. I do nto want to make it very comlicated. I just need to cut-and-past small red div into big green div using jQuery. And small div is NOT in green div, but outside. — quackquack, Aug 19 '11 at 17:30
@quackquack: That makes no sense. How is using JavaScript/jQuery less complicated than CSS? — Sparky, Aug 19 '11 at 21:26

Joseph Silber · Answer 1 · 2011-08-19T17:37:18.353

2

HTML:

<div id="big">
    <div id="small"></div>
</div>

CSS:

#big {
    width: 600px;
    height: 800px;
    background: green;
    position: relative;
}
#small {
    background: red;
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 0; left: 200px; /* (600-200)/2 */
}

Fiddle: http://jsfiddle.net/g6fKg/

If your small DIV is not inside your big DIV, you'll have to resort to using Javascript for this:

var $big = $('#big'),
    $small = $('#small');

$small.css({
    top: $big.offset().top + $big.height() - $small.height(),
    left: $big.offset().left + ( ($big.width() - $small.width()) / 2 )
});

This also has the added benefit of not requiring you to know the size of your DIVs.

And, here's the fiddle: http://jsfiddle.net/g6fKg/14/

edited Aug 19 '11 at 17:37

answered Aug 19 '11 at 15:22

Joseph Silber

214,931
59
362
292

The `left: 200px` is arrived at by dividing 600 in half (300) then diving 200 in half (100) and subtracting the two numbers. – Bill Criswell Aug 19 '11 at 15:24
Your answer is best but the OP asked for a jQuery solution. Ideally, he should edit his question and accept your answer unless he needs a dynamic (jQuery) solution for some reason. – Sparky Aug 19 '11 at 15:27
1

This answer is not the best because he is hardcoding left which is completely calculated base on outer div's width. What if outer divs width changes? Will the inner div center perfectly? – ShankarSangoli Aug 19 '11 at 15:46
@ShankarSangoli: He clearly stated that "The width of both boxes is known". – Joseph Silber Aug 19 '11 at 17:25
@nickyt: And how do you propose to keep it at the bottom? – Joseph Silber Aug 19 '11 at 17:25
small div is NOT inside big div! – quackquack Aug 19 '11 at 17:31
@Joseph - Even if the width is fixed you can still center it without setting left with some calculated value. Take a look at my demo. – ShankarSangoli Aug 19 '11 at 17:34
@ShankarSangoli: My comment _"{this CSS-only} answer is the best"_ was made when the only other posted answer to compare it with was a jQuery solution. Perhaps your answer is even better but it wasn't there when I commented. LOL. – Sparky Aug 19 '11 at 21:25
@Sparky672 His solution is the easiest if you don't care about adding non-semantic markup. I was trying to avoid that. – Joseph Silber Aug 21 '11 at 01:44
Just to clarify one last time, my comment was simply meant in a general context when only two answers were posted, one using JS and one using CSS. In other words, _"a CSS-only answer is best when compared to one requiring JS."_ – Sparky Aug 21 '11 at 01:58

score 1 · Answer 2 · edited Aug 19 '11 at 16:28

1

If your code is laid out like this:

<div class="container">
  <div class="small">Small</div>
  <div class="large">Large</div>
</div>

You can do it with this CSS:

.container {
  width: 600px;
  height: 800px;
  position: relative;
  margin: 10px auto;
}
  .container .large {
    position: absolute;
    width: 600px;
    height: 800px;
    background-color: green;
    z-index: 1;
  }

  .container .small {
    position: absolute;
    bottom: 0;
    left: 200px;
    z-index: 2;
    width: 200px;
    height: 200px;
    background-color: red;
  }

Live demo.

edited Aug 19 '11 at 16:28

Lightness Races in Orbit

378,754
76
643
1,055

answered Aug 19 '11 at 15:32

Bill Criswell

32,161
7
75
66

You are cheating. My container could be 2000px height and then your code is useless ;). Anyway, thanks for a try. – quackquack Aug 19 '11 at 17:34

ShankarSangoli · Answer 3 · 2011-08-19T17:37:13.713

1

You can try this solution which do not set any left style to center the smaller div which is basically dependent on the outer div width. This solution doesnt care about outer div's width or innder div's width because I am using margin:auto which takes care of centering the element perfectly

Working demo

Demo with smaller div outside the bigger div

Mark up

<div id="big">
    <div id="small"> 
       <div></div>
    </div>   
</div>

Css

#big {
    width: 600px;
    height: 800px;
    background: green;
    position: relative;
}
#small{
    bottom: 0px;
    position: absolute;
    width: 600px;
}
#small div{
    background:red;
    height: 200px;
    margin: auto;
    position: relative;
    width: 200px;
}

edited Aug 19 '11 at 17:37

answered Aug 19 '11 at 15:33

ShankarSangoli

69,612
13
93
124

That's left-aligned for me in FF5 and IE8. – Lightness Races in Orbit Aug 19 '11 at 16:26
Thanks @Tomalak, my demo was pointing to wrong link. Can you take a look now and care to remove the down vote? – ShankarSangoli Aug 19 '11 at 17:14
@quackquack - Take a look at my demo it works perfectly fine. – ShankarSangoli Aug 19 '11 at 17:23
@quackquack - Take a look at my edited answer it has 2 demos one with smaller div inside and one outside. With smaller div outside it positions itself at the bottom but if you have any scroll on the page then it positions untill the scoll position itself. Take a look. – ShankarSangoli Aug 19 '11 at 17:38

score 0 · Answer 4 · edited May 23 '17 at 12:01

If you're looking to "add" a div to the big box, use the after method:

   $('#big').after('<div id="small"></div>');

Check it out: http://api.jquery.com/after/

However, if both boxes are already in markup:

<html>
 <div id="big" />
 <div id="small />
</html>

I would use appendTo (http://api.jquery.com/appendTo)

$("#small").appendTo("#big");

I assume you already have your CSS created for this, but if not you can look at this question that uses Jquery to center a div: Using jQuery to center a DIV on the screen

Also check out Jquery CSS to change the style of elements using Jquery: http://api.jquery.com/css/

How to center on the bottom of the other using jQuery?

4 Answers4

How to center
on the bottom of the other using jQuery?