How to make nested Div wrap instead of overlap?

Question

I'm using Bootstrap's grid system. I have 3 divs inside a "row", and inside each of those divs are nested controls.

When I horizontally decrease the browser size, the 2nd and 3rd div in the row are overlapping the 1st div. I want them to wrap, not overlap.

How can I achieve this?

Here is my code:

<!-- SEARCH CONTROLS -->
<div class="row">
  <!-- Left side search boxes and search button -->
  <div class="col-xs-5">
    <div class="article" id="SAorPIList">
      <select style="min-width: 215px; max-width: 300px;" class="col-xs-4 form-control" data-bind="value: selectedSAPIValue, options: saorpi, optionsText: 'Name', optionsValue: 'CmeTypeId', optionsCaption: 'Select SA or PI'"></select>
    </div>
    <div class="col-xs-5" style="padding-top: 20px;">
      <select style="max-width: 300px;" class="specialties-class form-control" name="Name" id="SpecialtyId"></select>

    </div>
    <div class="col-xs-5" style="max-width: 150px; padding-top: 20px; padding-left: 175px;">
      <button id="btnDropDownsSearch" class="btn btn-search collapsed" type="button">
                    <i class="icon-search"></i>
       </button>
    </div>
  </div>

  <!-- The world "OR" in the center of the page -->
  <div class="col-xs-2" style=" padding-left: 75px; padding-top:50px;">
    <strong style="display:inline;">OR</strong>
  </div>

  <!-- Right side search box -->
  <div class="col-xs-5 pull-left" style="padding-bottom: 50px; min-width:400px;">
    <span><strong style="text-align:left;">Activity Search</strong></span>
    <div class="col-xs-4 input-group  pull-left input-group-lg" style="padding-top:50px;">
      <input id="txtFreeformSearch" class="form-control" type="search" style="min-width:175px;" />
      <div class="input-group-btn">
        <button id="btnFreeformSearch" class="btn btn-search collapsed" type="button">
                        <i class="icon-search"></i>
        </button>
      </div>
    </div>
  </div>
</div>

The more I play with it, the more I think the answer lies in using min-width. — markoos, Mar 29 '17 at 15:38

score 0 · Answer 1 · answered Mar 29 '17 at 13:58

When you say, you nesting controls to div; Do you mean somethink like this?

.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
</div>

No. Please see the HTML I added to my question. – markoos Mar 29 '17 at 14:15 — markoos, Mar 29 '17 at 14:15

score 0 · Answer 2 · answered Mar 29 '17 at 17:03

I solved this by defining min-width inside a good number of the tags. This allowed the DIVs to wrap in PC, tablet, and mobile formats.

I would post the resulting HTML, but I think it would affect too few readers to make it worthwhile. I say this because there is a knockout control and select2 control within the HTML, and some of their UI properties are defined in javascript.

How to make nested Div wrap instead of overlap?

2 Answers2