0

I'm encountering problems when trying to put a menu (height = 100%) next to the logo.

Well, the image controls the height of DIV (container), logically if put another DIV (menu) with height: 100% on the right side within that DIV (container), will stay in totality the height, but not ends up happening.

3 attempts, using 100%, auto and inherit

enter image description here

JSFIDDLE

Martin Turjak
  • 20,896
  • 5
  • 56
  • 76
Pedro Paulo Amorim
  • 1,838
  • 2
  • 27
  • 50

2 Answers2

1

To the dismay of many, height is a particularly finicky CSS property. You see, if the height of the parent element isn't explicitly defined, any percentage value given for height resolves to auto (Source here in the Values section). And that's what's going on here.

One solution would be, well, explicitly setting the height of the parent, like so:

height: 150px;

Unfortunately, if you don't want to do something like this you might need to turn to a JavaScript solution. You know, getting the height of the parent and then setting the child's height equal to that value.

Community
  • 1
  • 1
jamesplease
  • 12,547
  • 6
  • 47
  • 73
0

A possible CSS-only solution is to have the header act as a table (with the logo occupying a cell, and each menu item their own cell). The table would then dynamically change according to the highest cell, so if you put height: 100% on the menus they should size up to the height of the logo.

Note that you must remove float: right from the menu items or this won't work properly.

jsFiddle

Albert Xing
  • 5,620
  • 3
  • 21
  • 40