current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 7 down vote favorite
2

I have a rather difficult issue I'm stuck on I would appreciate some incite to if this is even possible with CSS. I have 6 divs, 1-3 need to be in a left column, and 4-6 in a right column. When you click any of the divs, they hide using jquery hide(). The part I am finding difficult is when you remove one div, I need them to reorder in a specific way. Please see attached image for the order / reorder proses im going for. see my fiddle for my progress, thanks a bunch for the help.

https://jsfiddle.net/m44pzvz4/ 

 <div id="container">
     <div class="child">1</div>
     <div class="child">2</div>
     <div class="child">3</div>
     <div class="child">4</div>
     <div class="child">5</div>
     <div class="child">6</div>  
 </div>

enter image description here

So you can see that if any 1-3 div is removed, the divs in 4-6 need to b moved from left column to the last spot in the first column.

share|improve this question
    
Are you always going to have exactly 6 elements? –  James McDonnell 6 hours ago
    
yes. there will always be a max of 6. –  nick 6 hours ago
    
Use child selectors to float the first three items to the left. When an item is hidden, it won't be considered one of the first three children, and it will shift everything like you described. –  Matthew Darnell 6 hours ago
    
I did attempt that, but I found that when you remove a div with .toggle() it still holds its nth-of-type position. So even when its removed form page .nth-of-type(1) still is .nth-of-type(1). As apposed to .nth-of-type(2) becoming .nth-of-type(1). –  nick 6 hours ago
1  
Heres an alternate solution using javascript, you could give it a shot.jsfiddle.net/m44pzvz4/2 –  James McDonnell 6 hours ago

2 Answers 2

up vote 5 down vote accepted

You can use flex-flow: column wrap:

$(".item").each(function() {
  $(this).on("click", function() {
    $(this).hide()
  });
});

$("button").each(function(index) {
  $(this).on("click", function() {
    $('#' + (index + 1)).toggle();
  });
});
.container {    
  display: -webkit-flex;     
  display: flex;             
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  width: 100px;
  height: 150px;
}

.item {
  width: 50px;
  height: 50px;
  border: 1px;
  line-height: 50px;
  text-align: center;
}

.r { background-color: #bf616a; }
.o { background-color: #d08770; }
.y { background-color: #ebcb8b; }
.g { background-color: #a3be8c; }
.b { background-color: #96b5b4; }
.v { background-color: #8fa1b3; }

.layout {  
  display: -webkit-flex;
  display: flex;        
  width: 400px;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout">
  <div class="container">
    <div id='1' class="item r">1</div>
    <div id='2' class="item o">2</div>
    <div id='3' class="item y">3</div>
    <div id='4' class="item g">4</div>
    <div id='5' class="item b">5</div>
    <div id='6' class="item v">6</div>
  </div>

  <div>
    Toggles:
    <div>1
      <button>toggle</button>
    </div>
    <div>2
      <button>toggle</button>
    </div>
    <div>3
      <button>toggle</button>
    </div>
    <div>4
      <button>toggle</button>
    </div>
    <div>5
      <button>toggle</button>
    </div>
    <div>6
      <button>toggle</button>
    </div>
  </div>
</div>

share|improve this answer
    
Is there a browser prefix to make this safari compatible? –  nick 5 hours ago
1  
I'll edit the post to include that in a bit, sorry. –  DTing 5 hours ago
    
No worries I really appreciate the help! –  nick 5 hours ago
    
Thansk so much, tonight im definitely reading more on display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; –  nick 5 hours ago
up vote 8 down vote

Use CSS columns and remove the float properties of your children:

#container {
  /* ... */
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2;  /* Firefox */
  column-count: 2;
  height: 300px;
}

Additionally, to prevent your boxes from splitting between columns (found here):

.child {
    /* ... */
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}

JS Fiddle Demo

share|improve this answer
3  
This is the right answer, but it's worth noting that it only works in IE10 and above. –  Matthew Darnell 6 hours ago
2  
It does have some bugs thou. –  nick 6 hours ago
1  
@blex yes thats fixes it –  btevfik 6 hours ago
1  
Thank you for your feedback @btevfik , I don't have Safari. –  blex 6 hours ago
1  
Thanks for your help blex I really appreciate it. –  nick 5 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.