1

I have a form within a containing div but the form displays outside the container:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Checkboxes
    </title>
    <style>
        .tex-filter-div{
            float:left;
        }
        #tex-filter-form-container{
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div id="tex-filter-form-container">
        <div id="filter-instructions"><p>To filter projects, click a heading and select a filter.</p></div>
        <div>
            <form>
                <div id="filter-div-project_category" class="tex-filter-div">
                    <div class="filter_category">
                        <h2 id="filter_category_heading_project_category" class="filter_category_heading">⟱ Filter by category
                        </h2>
                    </div>
                    <div class="filter_lists">
                        <div style="display: block;" id="selection_project_category" class="tex_filter_list">
                            <ul class="filter-checkbox-list">
                                <li class="filter-labels-list-element">
                                    <input class="tex-filter-checkbox-project_category" id="natural-resources" name="natural-resources" value="natural-resources" type="checkbox">
                                    <label class="filter-labels" for="natural-resources">Natural Resources
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="filter-div-project_location" class="tex-filter-div">
                    <div class="filter_category">
                        <h2 style="text-align: center;" id="filter_category_heading_project_location" class="filter_category_heading">⟱ Filter by location
                        </h2>
                    </div>
                    <div class="filter_lists">
                        <select id="selection_project_location" name="project_location" multiple="multiple" class="tex_filter_list">
                            <option class="tex-filter-option" value="boston">Boston
                            </option>
                            <option class="tex-filter-option" value="boulder">Boulder
                            </option>
                        </select>
                    </div>
                </div>
                <div id="filter-div-project_status" class="tex-filter-div">
                    <div class="filter_category">
                        <h2 id="filter_category_heading_project_status" class="filter_category_heading">⟱ Filter by status
                        </h2>
                    </div>
                    <div class="filter_lists">
                        <div style="display: block;" id="selection_project_status" class="tex_filter_list">
                            <ul class="filter-checkbox-list">
                                <li class="filter-labels-list-element">
                                    <input class="tex-filter-checkbox-project_status" id="complete" name="complete" value="complete" type="checkbox">
                                    <label class="filter-labels" for="complete">Complete
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form></div>
    </div>
</body>
</html>

The form is clearly inside of the containing div but displays completely outside of it. I'm not sure what could be wrong here.

Anthony
  • 722
  • 1
  • 9
  • 25
  • floats remove items from the flow. Not a CSS expert but I would start there – adam-beck Aug 08 '16 at 19:27
  • Exactly what @adam-beck said, floats take the element out of the flow and the parent element won't expand to contain it. You could probably achieve the effect you are looking for here with `display: inside-block` instead. Otherwise a clearfix element (empty element with `clear: both`, google it) might help. – hsan Aug 08 '16 at 19:30
  • This could help - http://stackoverflow.com/questions/2062258/floating-stuff-within-a-div-floats-outside-of-div-why – Adjit Aug 08 '16 at 19:30
  • Thanks everyone. I forgot how floats remove items from the flow. – Anthony Aug 09 '16 at 13:20

2 Answers2

2

Following are the CSS and HTML, I hope you got what you want. 

.container-wrapper {
  border: 1px solid black;
}
<div class="container-wrapper">
  <div id="filter-instructions">
    <p>To filter projects, click a heading and select a filter.</p>
  </div>
  <div class="tex-filter-form-container">
    <form>
      <div id="filter-div-project_category" style="float:left">
        <div class="filter_category">
          <h2 id="filter_category_heading_project_category" class="filter_category_heading">⟱ Filter by category
                        </h2>
        </div>
        <div class="filter_lists">
          <div style="display: block;" id="selection_project_category" class="tex_filter_list">
            <ul class="filter-checkbox-list">
              <li class="filter-labels-list-element">
                <input class="tex-filter-checkbox-project_category" id="natural-resources" name="natural-resources" value="natural-resources" type="checkbox">
                <label class="filter-labels" for="natural-resources">Natural Resources
                </label>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div id="filter-div-project_location" style="float:left">
        <div class="filter_category">
          <h2 style="text-align: center;" id="filter_category_heading_project_location" class="filter_category_heading">⟱ Filter by location
                        </h2>
        </div>
        <div class="filter_lists">
          <select id="selection_project_location" name="project_location" multiple="multiple" class="tex_filter_list">
            <option class="tex-filter-option" value="boston">Boston
            </option>
            <option class="tex-filter-option" value="boulder">Boulder
            </option>
          </select>
        </div>
      </div>
      <div id="filter-div-project_status" class="tex-filter-div">
        <div class="filter_category">
          <h2 id="filter_category_heading_project_status" class="filter_category_heading">⟱ Filter by status
                        </h2>
        </div>
        <div class="filter_lists">
          <div style="display: block;" id="selection_project_status" class="tex_filter_list">
            <ul class="filter-checkbox-list">
              <li class="filter-labels-list-element">
                <input class="tex-filter-checkbox-project_status" id="complete" name="complete" value="complete" type="checkbox">
                <label class="filter-labels" for="complete">Complete
                </label>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
`

`

GURURAJ DHARANI
  • 468
  • 1
  • 6
  • 14
1

When you float an element you need to "clear" the floats because the floated element is removed from normal document flow. I have applied one of the most common "clearfixs" found here http://nicolasgallagher.com/micro-clearfix-hack/

There are many others to choose from, just google "clearfix" and you will see a few options and other information on clearing floated elements right at the top of the results.

EDIT- This is a great article on clearing floats. https://css-tricks.com/the-how-and-why-of-clearing-floats/

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Checkboxes
  </title>
  <style>
    .tex-filter-div {
      float: left;
    }
    #tex-filter-form-container {
      border: 1px solid black;
    }
    /**
    * For modern browsers
     * 1. The space content is one way to avoid an Opera bug when the
     *    contenteditable attribute is included anywhere else in the document.
     *    Otherwise it causes space to appear at the top and bottom of elements
     *    that are clearfixed.    
     * 2. The use of `table` rather than `block` is only necessary if using
     *    `:before` to contain the top-margins of child elements.
     */
    .cf:before,
    .cf:after {
      content: " ";
      /* 1 */
      display: table;
      /* 2 */
    }
    .cf:after {
      clear: both;
    }
    /**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
    .cf {
      *zoom: 1;
    }
  </style>
</head>

<body>
  <div id="tex-filter-form-container" class="cf">
    <div id="filter-instructions">
      <p>To filter projects, click a heading and select a filter.</p>
    </div>
    <div>
      <form>
        <div id="filter-div-project_category" class="tex-filter-div">
          <div class="filter_category">
            <h2 id="filter_category_heading_project_category" class="filter_category_heading">⟱ Filter by category
                        </h2>
          </div>
          <div class="filter_lists">
            <div style="display: block;" id="selection_project_category" class="tex_filter_list">
              <ul class="filter-checkbox-list">
                <li class="filter-labels-list-element">
                  <input class="tex-filter-checkbox-project_category" id="natural-resources" name="natural-resources" value="natural-resources" type="checkbox">
                  <label class="filter-labels" for="natural-resources">Natural Resources
                  </label>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div id="filter-div-project_location" class="tex-filter-div">
          <div class="filter_category">
            <h2 style="text-align: center;" id="filter_category_heading_project_location" class="filter_category_heading">⟱ Filter by location
                        </h2>
          </div>
          <div class="filter_lists">
            <select id="selection_project_location" name="project_location" multiple="multiple" class="tex_filter_list">
              <option class="tex-filter-option" value="boston">Boston
              </option>
              <option class="tex-filter-option" value="boulder">Boulder
              </option>
            </select>
          </div>
        </div>
        <div id="filter-div-project_status" class="tex-filter-div">
          <div class="filter_category">
            <h2 id="filter_category_heading_project_status" class="filter_category_heading">⟱ Filter by status
                        </h2>
          </div>
          <div class="filter_lists">
            <div style="display: block;" id="selection_project_status" class="tex_filter_list">
              <ul class="filter-checkbox-list">
                <li class="filter-labels-list-element">
                  <input class="tex-filter-checkbox-project_status" id="complete" name="complete" value="complete" type="checkbox">
                  <label class="filter-labels" for="complete">Complete
                  </label>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>
Red2678
  • 3,177
  • 2
  • 29
  • 43