Position div box at the end of after ensuing elements

Question

If I have 3 Div boxes (any number really) ordered in the following manor:

<div>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

How can I make the div with id one be displayed after the div with id three without changing the structure of the html?

This is what the html should be displayed as:

________________________
| ____________________ |
| | id=two           | |
| |                  | |
| |__________________| |
| ____________________ |
| | id=three         | |
| |                  | |
| |__________________| |
| ____________________ |
| | id=one           | |
| |                  | |
| |__________________| |
|______________________|

kind of contradiction. do you want div `two` still visible? if not it is easy for div two write this `#two {display:none}` — Dhruvenkumar Shah, Aug 22 '12 at 23:21
@Lokase solution to this: http://stackoverflow.com/questions/12082481/identifying-main-submit-button-for-a-form — topherg, Aug 22 '12 at 23:28
@Lowkase, or custom styles for content generated elsewhere (reordering items to user preference). — Sz., Mar 16 '18 at 11:15

bfavaretto · Accepted Answer · 2012-08-23T02:23:18.903

It's possible depending on what comes after those divs. If there's nothing there, you can use position: absolute; top: 100%; on the first div to achieve that:

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

#container { position: relative; border: 1px solid red; }
#one { position: absolute; top: 100%; }
#one, #two, #three { width: 300px; height: 200px; border: 1px solid #ccc; }

http://jsfiddle.net/xjnrE/

However, if there's anything after the #container div, it will be under #one (at least partially, depending on the height; see demo).

Keep in mind that if the element is "in the flow" (i.e., it's not positioned and not floated), it will be rendered according to the order of appearance on the markup (and, consequently, the DOM). This means you must resort to JavaScript to change the actual position of the element in the DOM:

var container = document.getElementById('container');
var one = document.getElementById('one');
container.appendChild(one);

http://jsfiddle.net/xjnrE/3/

Thanks, it worked like a charm, the container needed to be nested in another container which had a bit of `padding-bottom` which made it appear to fit inside — topherg, Aug 23 '12 at 00:05

score 1 · Answer 2 · answered Aug 22 '12 at 23:26

1

If you control the dimensions of the divs and are sure that their contents will not break your layout,you could position them with css. A bit awkward, but something like:

#one, #two, #three {
   position: absolute;
   width: 200px;
   height: 200px;
}
#one {
   top: 400px;
}
#two {
   top: 0px;
}
#three {
   top: 200px;
}

These positions could then be changed with javascript if you need to.

answered Aug 22 '12 at 23:26

Justin Taylor

81
4

the width is controllable, but i can't maintain any control over the height – topherg Aug 22 '12 at 23:28
You could use javascript to get the height of elements and set the css top property dynamically. – Justin Taylor Aug 22 '12 at 23:31
would be ideal, but sadly not in what i'm using it for – topherg Aug 22 '12 at 23:33

score 0 · Answer 3 · answered Apr 15 '13 at 18:18

0

The following grab the first DIV and move it to be the last item in the parent container.

However, you will need to make sure you can target the container DIV somehow. So if you cannot edit the HTML, target the element based on some other parent element with a unique ID or class.

Markup:

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

JavaScript:

$('#container #one').appendTo('#container');

answered Apr 15 '13 at 18:18

Matthew

91
1
1

well, the main point of this question was for when multiple submit buttons exist in a form and enter is pressed, so will a submit within `#one` still be the button that is "clicked" when enter is pressed and more submit buttons exist later? – topherg Apr 15 '13 at 20:23
I'm pretty sure that if you hit ENTER it will submit the form regardless of the number of submit buttons within the form tags. The cursor needs to be within the form though (either in a field or having clicked a label). – Matthew Apr 24 '13 at 19:38
it will select the first submit button within a form, and if there are preceding has the "onclick" attribute set (especially seen in wordpress with image selects), that will be called instead of submitting the form – topherg Apr 24 '13 at 23:07

score 0 · Answer 4 · answered Mar 16 '18 at 13:37

FTR: flexbox support has matured since then, offering a clean solution.

/* That's all: */
#container { display: flex; flex-direction: column; /* omit the latter for horiz. stacking */ }
#one { order: 99999; /* Alas, no "last"... */ }

/* Demo visuals only: */
#one { background: pink; }
#container > div { width: 100px; height: 100px; border: 1px solid grey; }

<div id="container">
    <div id="one"> FIRST </div>
    <div id="two"> second </div>
    <div id="three"> third </div>
</div>

Position div box at the end of after ensuing elements

4 Answers4

Linked