this question has answer here:
i have form within containing div form displays outside 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 heading , select 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 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 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 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 inside of containing div displays outside of it. i'm not sure wrong here.
following css , html, hope got want.
`.container-wrapper { border: 1px solid black; }<div class="container-wrapper"> <div id="filter-instructions"> <p>to filter projects, click heading , select 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 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 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 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>
`
Comments
Post a Comment