Absolute Position Inside Relative

by Kyle Mitofsky

HTML

<p>Normal Wrapper (takes Up 100% of screen width)</p>
<div class='wrapper'>
    <div></div>
</div>

<p>Wrapper WITH relative positioning (takes up 100% of parent width</p>
<div class='wrapper relative'>
    <div></div>
</div>





<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO question: <a href='http://stackoverflow.com/q/18220290/1366033'>Problems setting max-width for a whole website?</a><br/>
    Further Reading: <a href='http://css-tricks.com/absolute-positioning-inside-relative-positioning/'>Absolute Positioning Inside Relative Positioning</a>
<div>

CSS

.wrapper {
    max-width:400px;
    height: 100px;
}
.relative {
    position: relative;
}
.wrapper div {
    width: 100%;
    height: 75px;
    background-color: blue ;
    position: absolute;
}