How to shrinkwrap horizontally centered div - html

Question

I have a layout like this:
<container div>
<header></header>
<footer>
<div>
<nav>
<ul>
<li></li>
</ul>
</nav>
<div>
</footer>
</container div>
The footer is a centered sticky footer. I want to add social media icons, but I don't want to specify a specific width.
How do I shrinkwrap the footer div without losing it's centered position?
If I add inline:block to the div css, the centering gets lost and it is aligned to the left side of the browser window.

Answer 1

If you add an inline-block to the inner div you will lose the centering, but you can solve this if you add a text-align: center to the footer.
Another solution is to use a CSS3 transform. (You have used one in the header).
When you use percents in a CSS transform the percent is related to the element itself instead to the element's container. Look at the next snippet:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
position: relative;
}
ul {
height: 30px;
line-height: 30px;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
list-style: none;
}
footer#social {
background: #F00;
bottom: 0;
left: 50%;
padding: 0 10px;
position: absolute;
transform: translateX(-50%);
width: auto;
}
<footer id="social">
<div id="socmed">
<nav id="social" class="socialIndex">
<ul>
<li>mail </li>
<li>linkedin</li>
<li>telephone</li>
</ul>
</nav>
</div>
</footer>

Answer 2

Simply use 'inline-block', like this:
footer > div {display: inline-block;}