html - Height not adjusted when set to float value? -


i wrote html page
css is

body{     margin: 0 auto;     min-width: 992px;     background: #f2f2f2;    } .container{     margin: 30px auto;     padding:5px;     width: 992px;     height: auto;     border: 1px solid #c6c6c6;     border-radius: 15px;     background: #fff;     } .column{        margin:0px 5px 5px 0px;        float:left;        height: 50px;        width: 486px;        background: #0094ff;        }

and body 

<div class="container">     <div class="column"></div>     <div class="column"></div>     <div class="column"></div>     <div class="column"></div> </div>


when run page removing float:left div class .column, height of .container automatically increase when set float value in div class .column height of div class .container don't increase.
please can tel me how fix problem?

add overflow:hidden; .containar


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more