When adding packages or code to my wiki it is sometimes need to show that code in context, which usually is a joomla module. So to that aim I have included some simple code below to emulate module positions and can be used safely in wiki articles. As with Joomla module positions they can be sub divided into mulitple modules so I have included a range below.
Single Module
Fake Module Content
<div> <div style="width: 30%; min-width: 180px; padding: 5px; margin: auto auto; border: 1px solid black;"> <p>Fake Module Content</p> </div> </div>
This might also be a good variant using min-width and max-width instead of percentage.
<div style="min-width: 180px; max-width: 300px; padding: 5px; margin: auto auto; border: 1px solid black;"> </div>
Double Module
Fake Module Content 1
Fake Module Content 2
<div style="float: left; width: 90%; border: 2px solid blue;"> <div style="float: left; width: 45%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;"> <p>Fake Module Content 1</p> </div> <div style="float: left; width: 45%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;"> <p>Fake Module Content 2</p> </div> </div> <div style="clear: both;"> </div>
Triple Module
Fake Module Content 1
Fake Module Content 2
Fake Module Content 3
<div style="float: left; width: 90%; border: 2px solid blue;"> <div style="float: left; width: 30%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;"> <p>Fake Module Content 1</p> </div> <div style="float: left; width: 30%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;"> <p>Fake Module Content 2</p> </div> <div style="float: left; width: 30%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;"> <p>Fake Module Content 3</p> </div> </div> <div style="clear: both;"> </div>
Header
I am not sure what the specific are of this one, but note the overflow statement
<div style="overflow: hidden; padding: 5px; border: 1px solid black;"> <p>Fake Header Content</p> </div>
Single Position
Fake Position Content
<div style="float: left; width: 90%; border: 2px solid blue;"> <p>Fake Position Content</p> </div> <div style="clear: both;"> </div>
More Styled Fake Module
Fake Module Title 1
Fake Module Content 1
Fake Module Title 2
Fake Module Content 2
HTML
<div class="demo-module-container" style="display: table; margin: auto;"> <div style="float: left; margin: 5px; height: 425px; width: 300px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;"> <h3 style="padding-top: 5px;"><span style="display: block; line-height: 25px; text-transform: uppercase; padding: 5px 14px; color: #fff; text-shadow: none; background: #2D5E95 none repeat scroll 0% 0%; margin: none;">Fake Module Title 1<br /></span></h3> <div style="height: 360px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;"> <p>Fake Module Content 1</p> </div> </div> <div style="float: left; margin: 5px; height: 425px; width: 300px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;"> <h3 style="padding-top: 5px;"><span style="display: block; line-height: 25px; text-transform: uppercase; padding: 5px 14px; color: #fff; text-shadow: none; background: #2D5E95 none repeat scroll 0% 0%; margin: none;">Fake Module Title 2<br /></span></h3> <div style="height: 360px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;"> <p>Fake Module Content 2</p> </div> </div> </div>