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

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

How to show in django cms breadcrumbs full path? -

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