CODEWITHSUNDEEP
htmlpositioningcsscss-tables
GCube3
GCube3

Reputation: 3

How to position two display: table-cell elements inside a position: fixed div

I'm trying to have two alongside divs inside a position fixed parent div, I tried any kind of operation I knew to come to a solution but with no success. I tried with display: inline-block, I tried with floats and last with display: table-cell but nothing works. I hope someone of you could come to a solution, thanks in advance. I'll leave the link to the JSFiddle I used to make some experiments so you can try by yourself:

JSFiddle

.CR_FE_MenuB{
width: 100%;
margin: 0;
padding: 0;
background-color: rgba(255,255,255,0.9);
box-shadow: 0px 1px 4px rgba(51,51,51,0.3);
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid rgba(194,194,194,1);
z-index: 10000;
margin-bottom: 10px;
text-align: left;
display: inline-table;
}

.CR_FE_MenuB .CR_FE_Menu_Logo{
width: 20%;
height: 60px;
padding-left: 5%;
display: table-cell;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.CR_FE_MenuB .CR_FE_Cont_Menu{
display: table-cell;
width: 50%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.CR_FE_MenuB a{
text-decoration: none;
display: block;
min-height: 100%;
width: 100%;
color: #008EC8;
}

.CR_FE_MenuB a:hover{
color: #FFF;
}

.CR_FE_MenuB ul{
margin: 0;
padding: 0;
list-style: none;
height: 60px;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.CR_FE_MenuB li{
width: 25%;
display: inline-block;
*display: inline;
*zoom: 1;
min-height: 100%;
height: 100%;
padding-top: 19px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
}

.CR_FE_MenuB li:hover{
background-color: #008EC8;
}

.selected{
background-color: #008EC8;
}

.selected a{
color: #FFF;
}

G.

Upvotes: 0

Views: 155

Answers (1)

Subha
Subha

Reputation: 1051

You need to add vertical-align: bottom to your logo div.

Add the following CSS code - 

.CR_FE_Menu_Logo{
    vertical-align: bottom;
}

This should fix the issue.

Upvotes: 2

Related Questions