HTML/CSS Div Sive Affects Other Divs -


in jfiddle example: https://jsfiddle.net/upmuvk6t/ why .navigationtabs have same height? if inner divs removed, , height of 1 tab changed has same effect, shown here: https://jsfiddle.net/upmuvk6t/

if parent div's height changed, has no effect.

why height of these divs seemingly connected?

body,  div {    margin: 0;    padding: 0;  }  .navigationtab {    vertical-align: top;    font-family: 'baloo tamma', cursive;    display: table-cell;    text-align: center;    width: 150px;    height: 30px;    background-color: #00ace6;    -webkit-border-bottom-left-radius: 10px;    -webkit-border-bottom-right-radius: 10px;    -moz-border-bottom-left-radius: 10px;    -moz-border-bottom-right-radius: 10px;    user-select: none;    cursor: pointer;  }  .navigationtab:hover {    background-color: #0086b3;  }
<div style="white-space: nowrap;position: fixed;width: 100%;">    <div class="navigationtab" style="float:right">      account    </div>    <div class="navigationtab">      home    </div>    <div class="navigationtab" style="height:50px;">      <!--this-->      services    </div>    <div class="navigationtab">      1    </div>    <div class="navigationtab">         </div>  </div>

its because divs displayed table-cell designed have same height other cell(s) in same row, let's try answer here - https://jsfiddle.net/upmuvk6t/1/

modify display value inline-block solve problem. may have add vertical-align: top; .navigationtab

edit 1 -

i changed height property of .navigationtab min-height make more sense


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -