Centering an overwide Element

Aligning a wide element with a fixed width within an inline container.

by Dini Mer

HTML

<div id="narrow">
    I'm fluid. I can be anything I want!<br> 
    I'm fluid. I can be anything I want!<br> 
    I'm fluid. I can be anything I want!<br> 
    I'm fluid. I can be anything I want!<br> 
   <div id="wide">
       I'm centered!
   </div>
</div>

CSS

body { text-align: center; }

#narrow {
    position: relative;
    display: inline;
    
    /* not necessary */
    background-color: wheat;
}

#wide {
    position: absolute;
    width: 400px;
    left: 50%;
    margin-left: -200px; /* half of the container's width */
    
    /* not necessary */
    text-align: center;
    top: 0;
    margin-top: 1em;
    background-color: lightgrey;
}