Stack-overflow question example #1

by laustdeleuran

HTML

<h2>Solution one</h2>
<div id="one">
    <img src="http://placehold.it/200x200" alt="" />
    <div id="two">Inner div</div>
</div>
<h2>Solution two</h2>
<div id="three">
    <img src="http://placehold.it/200x200" alt="" />
    <div id="four">Inner div</div>
</div>
<h2>Solution three (simple)</h2>
<div id="five">
    <img src="http://placehold.it/200x200" alt="" />
    <div id="six">Inner div</div>
</div>
<h2>Solution four</h2>
<div id="seven">
    <img src="http://placehold.it/200x200" alt="" />
    <div id="eight">Inner div</div>
</div>

CSS

/*=GENERIC STYLES*/
div { padding:0; margin:0; }
img { display:block; }
h2 { padding-top:1em; clear:both; }
/*=SOLUTION ONE*/
#one { position:relative; float:left; }
#two { position:absolute; bottom:0; right:0; }
/*=SOLUTION TWO*/
#three { float:left; }
#four { float:right; height:20px; margin-top:-20px; position:relative; z-index:1; }
/*=SOLUTION THREE*/
#five { float:left; }
#six { float:right; }
/*=SOLUTION FOUR*/
#seven img { display:inline-block; }
#eight { display:inline-block; width:200px; margin-left:-200px; position:relative; z-index:1; text-align:right; }