Aligning a child div's right/bottom in parent

Question

It's item form with elements/divs (checkbox groups, text field, dropdowns). elements coming one by one. If user initial(select or input value) current element is validated and added to wrapper container. Html example is bellow:

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <!-- more divs -->
</div>

My problem:

child div has more complex
order is unchangeable
the size of div is dynamnic, between 1-20
column count 4 is just for example in reality is depend on wrapper div width, between 1-8
no javascript usage

Mission: like a pic

hello mr. ts.tsgoo, which style apply on for this html code, put in your question so i give you proper answer. — Mayur Vora, Jun 19 '17 at 04:30
Please add complete code that can be helpful in understanding where the problem is. Like in your case how can anyone know what styling are you using. — Black Mamba, Jun 19 '17 at 04:46
What did you do to achieve this? What problem did you face? Or you're just looking for someone who will code for you for free? — Kosh, Jun 19 '17 at 04:48

score 1 · Answer 1 · answered Jun 19 '17 at 05:33

1

if you have a fixed number of div and display like above

so following code will help you

#wrapper div{
  border: 1px solid #ddd;
     float: right;
     margin: 5px;
     padding: 30px;
     font-weight: bold;
     font-size: xx-large;
 }

 #wrapper
 {
  border: none;
  position: absolute;
  bottom: 0px;
  right: 0px;
 }

<div id="wrapper">
    
    <div>2</div>
    <div>1</div>
    <div style="clear: right;">6</div>
    <div>5</div>
    <div>4</div>
    <div>3</div>
</div>

answered Jun 19 '17 at 05:33

Bhargav Chudasama

6,928
5
21
39

the order of child div is unchangeable for me – tsogtgerel.ts Jun 19 '17 at 06:56
you can tell me your output clearly which type of output you need – Bhargav Chudasama Jun 19 '17 at 06:57
Apologies for my bad structured question Bhargav, Thank you for your Help – tsogtgerel.ts Jun 19 '17 at 07:09

score 1 · Answer 2 · answered Jun 19 '17 at 08:06

This can be done by using a bit of JavaScript and CSS-flex.

function reverse(elem){
  for (var i=0; i < elem.childNodes.length; i++) 
    elem.insertBefore(elem.childNodes[i], elem.firstChild);

}
reverse(document.getElementById('wrapper'))

#wrapper {
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  direction: rtl;
}

See it in action:

function reverse(elem){
  for (var i=0; i < elem.childNodes.length; i++) 
    elem.insertBefore(elem.childNodes[i], elem.firstChild);

}
reverse(document.getElementById('wrapper'))

#wrapper {
  /* the important bit */
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  direction: rtl;
  
  /* styling */
  height: 200px;
  width: 200px;
  border: 1px solid;
}

#wrapper div {
  /* styling */
  border: 1px solid;
  padding: 20px;
}

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

Improvement

The JavaScript only reverses the order of the elements. If you add the children yourself, than add them in the reverse and omit the JavaScript. This would look much nicer and like this:

#wrapper {
  /* the important bit */
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  direction: rtl;
  
  /* styling */
  height: 200px;
  width: 200px;
  border: 1px solid;
}

#wrapper div {
  /* styling */
  border: 1px solid;
  padding: 20px;
}

<div id="wrapper">
    <div>6</div>
    <div>5</div>
    <div>4</div>
    <div>3</div>
    <div>2</div>
    <div>1</div>
</div>

Robin Huy · Answer 3 · 2017-06-19T08:15:57.677

You can use float and transform like this:

* {
  box-sizing: border-box;
}

#wrapper {
  transform:rotate(180deg); /* Rotate container 180 degree */
  width: 350px;
  height: 350px;
  border: 1px solid black;
}

#wrapper > div {
  transform:rotate(180deg); /* Rotate item 180 degree to display normal */
  float: left;
  width: 25%;
  height: 80px; 
  padding: 20px;
  border: 1px solid red;
}

<div id="wrapper">
  <div>7</div>
  <div>6</div>
  <div>5</div>
  <div>4</div>
  <div>3</div>
  <div>2</div>
  <div>1</div>
</div>

But the order is reversed. So if you have more items, just add them into the beginning of container.

If you don't want to use float, can use display: flex to container:

display: flex;
flex-wrap: wrap;
align-content: flex-start;

Aligning a child div's right/bottom in parent

3 Answers3

Improvement