html - height not adding height to a empty div -

-

hey guys new bootstrap , have following html ::

<div class="col-md-6 clients">      <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>     <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>     <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>       <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>     <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>     <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>  </div>

now after 1st 3 col-xs-4 want vertical space , did following : 

<div class="col-md-6 clients">      <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>     <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>     <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>      <div class="image-separator"></div>      <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>     <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>     <div class="col-xs-4"><img src="img/1.jpg" alt="" class="img-responsive"></div>  </div>

notice div <div class="image-separator"></div> , gave following css : 

.image-separator {     height: 20px; }

surprisingly no vertical space create , played around bit , added following styles : 

.image-separator {     height: 20px;     width: 100%;     float: left; }

this did work , why did jsut height:20px not work ? curious , taught come here on , ask , can please explain , love learn how css works , asking , new css . fiddle here.

note:: not looking solve problem , solved , trying understand why happens !

thank you.

it didn't work before because bootstrap columns have floating value: float:left , have clear floating:

clear: both

added css of spacer

.image-separator {     height: 20px;     clear: both; }

i'm editing answer because forgot bootstrap has class clear floating elements more eficiently: clearfix.


Comments

Post a Comment

Popular posts from this blog

angularjs - Redirect to a new template in angular js -

-
i new angularjs, please consider mistakes. the scenario is, have index.html page , login.html page, index , login have different layout different header footer , all. other pages expect login share same layout index.html now, how can navigate login.html using anuglar ui router. myapp.config(function ($stateprovider, $urlrouterprovider) { $stateprovider.state('home', { url: '/', templateurl: 'app/views/site/home.html', controller: 'homectrl' }).state('login', { url: '/login', templateurl: 'app/views/site/login.html' }) }); this not work loads content of login index keeping header , footer same of index. know state supposed work way. now, there way can call new view using ui.router. i appreciate help. thanks you set multiple named views ( https://github.com/angular-ui/ui-router/wiki/multiple-named-views ). this allow make header , footer separate views can ...
Read more

Oracle SQL. How to select specific IDs where value of columns specify criteria? -

-
i have following statement/query: select table1.file_id, table1.status, table2.status table1 inner join table2 on table1.file_id = table2.file_id; the result follows: file id | status table 1 | status table 2 ----------------------------------------------------- 5500002 | ax | ics 5500002 | ax | icso 5500002 | axo | ics 5500003 | ax | ics 5500003 | ax | ics 5500003 | ax | ics 5500004 | null | icso test 5500004 | axo | ics 5500004 | ax | null i need each file id check 4 statuses: - ax - axo - ics - icso i want run select on file id s cover 4 statuses. can see file id occurs multiple times , i'd want query return file id fulfills requirement, in instance return 5500002 , 5500004. for 550000...
Read more