html - Hover moving other elements to the right -


whenever mouse hovers 1 of long <li> elements other elements move right.

here's fiddle link :

.footer_links{      margin-top:60px;        }    footer .ourservices{    	display: inline-block;  	float:left;  	margin: 0px -10px 0px 77px;        }    footer .ourservices ul li,a,h3{      text-decoration: none;      color:white;      list-style: none;  }    footer .ourservices .columns_title{      text-transform: uppercase  }      footer .ourservices .columns_title{      margin-bottom:17px;      font-size:23px;      font-family:raleway-regular;      font-weight:lighter;  }  footer .ourservices ul li, h3{      margin-bottom:8px;      font-size:12px;  }    footer .ourservices ul li{      margin-top: 10px;  }    footer ul li:hover{      font-family: 'open sans';      font-weight:bold;    }
<div class="footer_links">                                      <div class="ourservices">                                          <h3 class="columns_title">connect</h3>                                          <ul>                                              <li>1234 street name</li>                                              <li>suburb title</li>                                              <li>state, australia 400</li>                                              <li>phone:(00) 000 000 000</li>                                              <li>fax:(00) 000 000 000</li>                                              <li>info@email.com</li>                                          </ul>                                      </div>                                                                    <div class="ourservices">                                          <h3 class="columns_title">our services</h3>                                          <ul>                                              <li><a href="#">cotmprehensive geriatric assessment</a></li>                                              <li><a href="#">falls, mobility problems</a></li>                                              <li><a href="#">incontinence</a></li>                                              <li><a href="#">polypharmacy</a></li>                                              <li><a href="#">osteoporosis</a></li>                                              <li><a href="#">frailty</a></li>                                          </ul>                                      </div>                                                            <div class="ourservices">                                          <h3 class="columns_title">explore</h3>                                              <ul>                                                  <li><a href="#">our doctors</a></li>                                                  <li><a href="#">treatments</a></li>                                                  <li><a href="#">appointments</a></li>                                                  <li><a href="#">services</a></li>                                                  <li><a href="#">about</a></li>                                                  <li><a href="#">contact</a></li>                                              </ul>                                      </div>

jsfiddle.net/#&togetherjs=kdkei5hnq6

it because width of each div being determined width of contents, , positioning of other div determined positioning of div beside it. bold hover effect causing text within wider, causing chain reaction in positioning of other elements.

to fix it, set width of container won't resize based on contents:

footer .ourservices {     width: 170px; } 

Comments

Popular posts from this blog

javascript - Hide toolbar of pdf file opened inside iframe using firefox -

Ansible - ERROR! the field 'hosts' is required but was not set -

Copy range with conditional formatting -