Hi Expert,
I am trying to make a footer for my website.
I want 2 divs and one list to be inline in this footer. But that is not happening. I used the css the CSS Property display:inline-block. What happens is that the divs get aligned but the list element just shifts a bit down.
Could someone please explain me why this is happening? Is it right thing to use inline-block for this thing or is there some better way(I'm sure that there is)?
Any help would be amazing thank you!
#footer {height:auto;
width:100%;
background-color:#666;
background-image:url(footer_shade.png);
background-repeat:no-repeat;
background-position:50% 0;
border-top:1px solid #FFF;
color:#fff;
font-family:'Bree Serif',serif;
font-size:16px;
line-height:20px;
display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.footerContents {
width:200px;
height: 200px;
padding:5px;
margin-top: 30px;
margin: 20px;
margin-bottom: 5px;
background-color: red;
-moz-flex-box:1;
-webkit-flex-box:1;
-ms-flex:1 1 200px;
-webkit-flex: 1 1 200px;
flex:1 1 200px;
}