CODEWITHSUNDEEP
htmlcss
Troy Cost
Troy Cost

Reputation: 67

Vertically aligning a menu with table display

After hours of Googling I managed to make the { display : table } and { vertical-align : bottom } work. However, if I change the name of my div class called "big div" to any other name, then the table properties on the container and UL items below stop working and the menu is no longer positioned.

.big div
{
    background-color : #328332 ;
    width : 100% ;
    height : 90px ;
    margin-top : 0 ;
    color : white ;
    text-align : center ;
    position : relative 
}

.tablecontain
{
  display : table
}

.menu 
{
    margin : 0  ;
    list-style : none ;
    padding : 0 ;
    display : table-cell ;
    vertical-align : bottom
}

.menu li 
{
    display : inline-block
}

.menu li a
{
    text-decoration : none ;
    padding : 15px ;
    background-color : #006400 ;
    color : white ;
    display : block ;
    margin : 0 
}

Here is a JSfiddle where it works properly.

And here is one where I have given the div another name of "container" and it stops working.

I have tried applying the display: table, and table-cell property to different elements but I have not been able to do it any other way. I should also mention I tried applying the table property to the "big div" class without using the tablecontain div at all. That didn't work.

Also, I am curious about other ways of doing this. I can do the position relative on the container and position absolute on the menu, but are there other or more commonly used ways of moving menus around?

Upvotes: 0

Views: 50

Answers (3)

Lewis Hai
Lewis Hai

Reputation: 1214

Change 

.container
{
   background-color : #328332 ;
   width : 100% ;
   height : 90px ;
   margin-top : 0 ;
  color : white ;
  text-align : center ;
  position : relative 
}

To 

.container div
 {
   background-color : #328332 ;
   width : 100% ;
   height : 90px ;
   margin-top : 0 ;
   color : white ;
   text-align : center ;
  position : relative 
 }

It works fine, hope it helps

Upvotes: 1

Maihan Nijat
Maihan Nijat

Reputation: 9344

.big div selects the div element under the .big class. If you want to change the name of the .big div to .container and applying style to .container it is not working because you have to apply the style to tablecontain to work. In your second fiddle replace the .container to tablecontain.

Upvotes: 1

Esteban Rincon
Esteban Rincon

Reputation: 2110

The problem is that div is a reserved word in css to select any div tag

Your class is named .big not big div

you can add style to an element using multiple classes by spacing every class so in this case: 

.big div

you're selecting the class .big that contains a div

Upvotes: 2

Related Questions