Collapsing issue does not let me get elements next to each other. (im using bootstrap)

Question

So I have two col-sm-6 next to each other and one of them is an accordion. I made an extra div wrapping the accordion and gave it a background color. Now when I did that the parent div which is this wrapping div that I made collapses and I know how to make it not collapse with plenty of css tricks and using "clearfix" in bootstrap classes but when I do that I cannot get the other col-sm-6 to be next to it. It keeps pushing the col-sm-6 that is suppose to be next to it down. AND also the wrapper div that I made takes up the whole 12 columns instead of just 6. (my wrapper div is called box2)

Here is my code:

<div class="container mar hidden-xs">

<div class="row">
<div class="box2 clearfix">
<div class="col-sm-6">

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
</div><!--Box2 END-->
</div><!--col-sm6 END-->

<div class="col-sm-6">
<p>this is suppose to be the content next to the accordion that gets pushed down when I use the clearfix class to help with the collapsing or if I use any other css tricks to fix the collapsing div such as overflow hidden and other techniques.</p>
</div><!--col-sm6 END-->

</div><!--Row END-->
</div><!---container END-->

CSS:

.box2 {
background: #red;
border-radius: 20px;
padding: 5px 5px;
}

.mar {
    margin: 50px 0px 0px 0px;
    padding: 50px 0px 0px 0px;
    border-top: 1px solid #cccccc;
}

Answer 1 · 2014-06-21T04:56:56Z

June 21, 2014 4:56am

Hi Lucas,

Your closing </div> element is in the wrong place within your HTML, currently you have it directly after your first column which will cut off the second one, instead you should have the following.

</div><!--col-sm6 END-->

<div class="col-sm-6">
<p>this is suppose to be the content next to the accordion that gets pushed down when I use the clearfix class to help with the collapsing or if I use any other css tricks to fix the collapsing div such as overflow hidden and other techniques.</p>
</div><!--col-sm6 END-->

</div><!--Box2 END-->
</div><!--Row END-->
</div><!---container END-->

Answer 2 · 2014-06-21T07:32:27Z

June 21, 2014 7:32am

Hi Lucas,

Is there any reason you can't apply this background color to the col-sm-6 div that contains the accordion?

If for whatever reason you have to use the box2 div then you need to give it a 6 col class so that it only takes up half the space. Then you need to give the div containing the accordion a 12 col class so it takes up the full amount of the box2 div.

Something like:

<div class="box2 col-sm-6 clearfix">
<div class="col-sm-12">

Also, I believe your comments are mismatched here:

</div><!--Box2 END-->
</div><!--col-sm6 END-->

Welcome to the Treehouse Community

Looking to learn something new?

Lucas Santos

Lucas Santos

Collapsing issue does not let me get elements next to each other. (im using bootstrap)

2 Answers

Chris Shaw

Chris Shaw

Lucas Santos

Lucas Santos

Jason Anello

Jason Anello

Lucas Santos

Lucas Santos