Not able to align the elements in-line - html

Question

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.
Here is the jsFiddle Link: http://jsfiddle.net/tw2Wp/2/.
If you see the JSfiddle, you will that the three divs with class footerContents are not aligned in-line.
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)?

Answer 1

Please add vertical-align to .footerContents:
.footerContents {
display: inline-block;
width: 200px;
height: 200px;
padding: 5px;
margin-top: 30px;
margin-left: 50px;
margin-bottom: 5px;
background-color: red;
vertical-align: top; /* <<< */
}
Demo

Answer 2

Would you use the css3 flexbox module, like this:
HTML
<div id="footer">
<div class="footerContents">
...
</div>
<ul class="footerContents">
...
</ul>
<div class="footerContents">
...
</div>
</div>
<div>Copyright © </div>
CSS
#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;
}
Please view the demo. and some about the flexbox, if you want to know,please will click here and here.

Answer 3

A solution would be to float the elements rather than using inline-block, see working example here: http://jsfiddle.net/tw2Wp/2/
Note that I also added an extra div with the class clear which will clear the floats. By doing this your background will appear again. Because of the floated elements the parent div doesn't have a clue how large it should be (so it's height 0).
.clear{
clear:both;
}

Answer 4

You can do like this:
HTML
<div id="footer">
<div class="footerContents">
...
</div>
<ul class="footerContents">
...
</ul>
<div class="footerContents">
...
</div>
</div>
<div>Copyright © </div>
CSS
#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;
**white-space: nowrap;**
}
.footerContents {
display:inline-block;
width:200px;
height: 200px;
padding:5px;
margin-top: 30px;
margin-left: 50px;
margin-bottom: 5px;
background-color: red;
**vertical-align: top;
white-space: normal;**
}
please view the new demo.