CODEWITHSUNDEEP
htmlcss
connor
connor

Reputation: 39

HTML/CSS Div Sive Affects Other Divs

In this JFiddle example: https://jsfiddle.net/upmuvk6t/ Why do the .navigationtabs all have the same height? If the inner divs are removed, and the height of one tab is changed it has the same effect, as shown here: https://jsfiddle.net/upmuvk6t/

If the parent div's height is changed, it has no effect.

Why is the 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">
    Another One
  </div>
  <div class="navigationtab">
    About
  </div>
</div>

Upvotes: 0

Views: 844

Answers (4)

Aravind
Aravind

Reputation: 41533

if you want to use the above as a menus add float:left; & display:inline-block to .navigationtab class and remove display:table-cell as below 

.navigationtab {
    vertical-align:top;
    font-family: 'Baloo Tamma', cursive;
    float:left 
    text-align: center;
    width: 150px;
    height: 30px;
    display:inline-block;
    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;
}

Upvotes: 0

Zay Lau
Zay Lau

Reputation: 1864

Its because the divs are displayed as table-cell which is designed to have the same height with other cell(s) in the same row, let's try my answer here - https://jsfiddle.net/upmuvk6t/1/

Modify the display value to inline-block will solve the problem. You may also have to add vertical-align: top; to .navigationtab

Edit 1 -

I changed the height property of .navigationtab to min-height that would make more sense

Upvotes: 3

4dgaurav
4dgaurav

Reputation: 11506

You need to change display of .navigationtab from table-cell to inline-block as table-cell is constrained to have height of its parent (table) 

.navigationtab {
  vertical-align: top; /* aligns to top */
  display: inline-block; /* displays side by side */
}

DEMO

Upvotes: 0

brian treese
brian treese

Reputation: 341

If you change from display: table-cell to display: inline-block the heights will vary

Upvotes: 0

Related Questions