html - Container with justified text-align in IE -


i have 3 divs have fixed widths. goal align these 3 divs horizontally equal spacing between each. have found best solution far use container "text-align: justify" seen in tutorial: http://www.barrelny.com/blog/text-align-justify-and-rwd/.

this method place equal space between 3 divs, regardless of other factors. i've used technique , feel far superior using floats. problem, however, doesn't appear working in ie 11 , down.

i minimize html, put "&nbsp" between each div:

<div class="block-container">     <div class="block"></div>&nbsp;     <div class="block"></div>&nbsp;     <div class="block"></div> </div> 

the "block-container" has these styles applied make work:

max-width: 1100px; text-align: justify; &:after{     content: '';     display: inline-block;     width: 100%;     height: 0;     font-size:0;     line-height:0; } 

in every browser except ie, works fine. have ability vertically align each div using "vertical-align: middle". in ie, however, divs placed next each other , not justified in container. there way ie interpret "text-align: justify" or "nbsp" differently?

i figured out answer justify grid's documentation: http://justifygrid.com/. trick use "text-justify: distribute-all-lines;" on container element fix in ie. recommend people adopt method on floats if want support ie9. otherwise switch flexbox.


Comments

Popular posts from this blog

How to show in django cms breadcrumbs full path? -

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -