宽度，填充和边框上平滑的CSS“折叠”过渡

Question

I am trying to create a transition that will effectively 'collapse' a div and floating elements that it contains, by altering the width, padding and border.

I have done some investigation which you can see here: http://jsfiddle.net/p38b6ndb/1

To include a sample:

HTML:

<div>
    <div class="section">
        <div class="sub-section">label</div>
        <div class="sub-section">field</div>
    </div>
    <div class="section collapsible">
        <div class="sub-section">label</div>
        <div class="sub-section">field</div>
    </div>
    <div class="section">
        <div class="sub-section">label</div>
        <div class="sub-section">field</div>
    </div>    
</div>

CSS:

.section {
    float: left;
    width: 25%;
}

.section.collapsible {
    opacity: 1;
    transition: opacity linear 1s, width linear 1s;
}

.section.collapsible.collapsed {
    width: 0;
    opacity: 0;
}

.sub-section {
    width: 50%;
    float: left;
    height: 42px;
}

The scenario: the 2nd section should collapse, with the 3rd section moving left alongside the 1st section.

The problem: if I have padding and/or border on the div that is being collapsed, when the width reaches a certain amount on collapse the divs wrap around, causing the height to increase, pushing subsequent elements downwards.

• I tried with box-sizing: border-box but this has a clear wrapping effect as well.
• I tried to transition the padding and border-width as well as the width , but again it still wraps. I could experiment with different durations but it still has a strange effect.
• I tried to ignore the padding and border as they go opaque, and just add a margin-left , but this doesn't affect the height and the
  'pushing downwards'.
• I could fix the height but I actually want height to be auto as each section could contain various sizes of content.

How can I implement this collapse transition on divs with padded/bordered elements?

If an answer could be demonstrated by updating the fiddle that would be really welcome.

Answer 1

Try to set 'padding: 0' to each .collapsed > sub-section-border-box, and of course set a transition

demo

.section.collapsible .sub-section-border-box {    
    padding: 10px;
    border-width: 2px;
    transition: all linear 1s;
}

.section.collapsible.collapsed .sub-section-border-box{    
    padding: 0;
    border-width: 0;
}

Answer 2

So far, the best solution I have found is to transition padding and border-width to 0, but only for the left and right, not for the top and bottom. That way, the collapse appears only to be on the width, the divs do not change height at all.

.section.collapsible {
    opacity: 1;
    transition: opacity linear 1s, width linear 1s;
}

.section.collapsible.collapsed {
    width: 0;
    opacity: 0;
}

.section.collapsible .sub-section {    
    padding: 10px;
    border-width: 2px;
    transition: padding linear 1s, border-width linear 1s;
}

.section.collapsible.collapsed .sub-section {    
    padding: 10px 0;
    border-width: 2px 0;
}

Demo: http://jsfiddle.net/p38b6ndb/6/

This also means I can still use box-sizing: border-box as well.