Zurb foundation div align issue

Question

i am using zurb foundation for building website, but now i am facing a problem as follows

There are four columns in a row and one of them is not visible sometimes as per some conditions, the code is

<div class="row">
    <div class="small-3 columns">1 ... </div>
    <div class="small-3 columns" style="display:none;">2 ... </div>
    <div class="small-3 columns">3 ... </div>
    <div class="small-3 columns">4 ... </div>
</div>

Now the problem is when the div is disabled the empty space between them should be used by other divs, but it is not happening in my case, I know, i am missing small point, but cant get it here is the image of problem I need the 4th div to be shifted to left, as 3rd div is shifted automatically, if 2nd div is display:none

Answer 1

The ZURB-Foundation (looks like you are using version 4) doesn't work like that by default.

What I usually do is create a .left {float: left !important;} class. If you apply that to your 4th div then it will do as you say.

However depending on your reason for doing this AND WHETHER THIS IS ONLY SUPPOSED TO APPLY TO DESKTOP/TABLET/MOBILE or ALL THREE, you might want to use @media queries in the stylesheet to specify where and when.

Examples:

@media (query goes here) {
 .row .columns:last-child {
  float: left; 
 }
}

** OR **

.left {
 float: left !important;
}

THEN

   <div class="row">
     <div class="small-3 columns">1 ... </div>
     <div class="small-3 columns" style="display:none;">2 ... </div>
     <div class="small-3 columns">3 ... </div>
     <div class="small-3 columns left">4 ... </div>
   </div>

Answer 2

@jnelson thanks for the help, now i realized the power of !important, so i have created simple solution

.abc{

    float:left !important;  
}

This also worked correctly on all type of devices

Answer 3

Try this fiddle

HTML

<div class="row">
    <div class="small-3 columns">1 ... </div>
    <div class="small-3 columns" style="display:none;">2 ... </div>
    <div class="small-3 columns">3 ... </div>
    <div class="small-3 columns">4 ... </div>
</div>

CSS

div.columns
{
    padding:10px;
    background:#00bfff;
    width:20%;
    display:block;
    float:left;
}

Answer 4

You should not be changing the fundamental structure of how the columns are sized or work.

Instead you should just uses different classes. If you know that one column will be disabled, and I am assuming you are using javascript to do this. Then also use javascript to add the proper column width. If you have 3 columns instead of 4(due to one being display none) give the three columns a small-4. This line of thinking will also allow you to handle two columns (small-6).

If you absolutely have to use 3 columns I agree with the above posts that you need to change.

[class*="column"]+[class*="column"]:last-child {
float: right;

to

[class*="column"]+[class*="column"]:last-child {
float: left;