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
Post a Comment