Horizontally Center a Floating Element of Variable Width (Position Relative)

by kaikemono

HTML

<div id="featureWrap">
   <div id="feature">
   <ul>
            <li>Nulla vitae elit libero, a pharetra augue.</li>
            <li>Vestibulum id ligula porta felis euismod semper.</li>
            <li>Donec ullamcorper nulla non metus auctor fringilla.</li>
            <li><img src="http://placekitten.com/g/300/100" /></li>
            <li>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</li>
            <li>Donec ullamcorper nulla non metus auctor fringilla.</li>
            <li>Nulla vitae elit libero, a pharetra augue.</li>
            <li>Cras mattis consectetur purus sit amet fermentum.</li>
        </ul>
   </div>
</div>

CSS

#featureWrap {
    float: left;
    left: 50%;
    position: relative;
}

#feature {
    background-color: #f2f4f7;
    float: left;
    left: -50%;
    padding: 20px;
    position: relative;
}