Example: Header float
When you want the "expand" and "collapse" Box to float, you can tell ByRei EliseBox to make the float for you.
This is can be done over "EliseBox_float-left" or "EliseBox_float-right".
Live Example
Position: Right (Default) / float
Test 1 (float: left): Click the "minus" to collapse the Content
Here you see the Content from "Test 1".
Test 2 (float: right): Click the "plus" to expand the Content
The Content will disappear after you click the "minus".
Position: Left / float
Test 1 (float: left): Click the "minus" to collapse the Content
Here you see the Content from "Test 1".
Test 2 (float: right): Click the "plus" to expand the Content
The Content will disappear after you click the "minus".
Test W3C Validation:
HTML Code
...
<script type="text/javascript" src="byrei-elisebox_0.6.js"></script>
<script type="text/javascript">
if (typeof(ByRei_EliseBox) !== "undefined") {ByRei_EliseBox.config.path.img = '../images/';}
</script>
<h3> Position: Right (Default) </h1>
<h4 class="EliseBox_header-expand EliseBox_float-left" style="text-align: right;">Test 1 (float: left): Click the "minus" to collapse the Content </h4>
<p>
Here you see the Content from "Test 1".<br>
</p>
<h4 class="EliseBox_header-collapse EliseBox_float-right">Test 2 (float: right): Click the "plus" to expand the Content </h4>
<p>
The Content will disappear after you click the "minus".<br>
</p>
<h3> Position: Left </h3>
<h4 class="EliseBox_header-expand EliseBox_pos-left EliseBox_float-left" style="text-align: right;">Test 1 (float: left): Click the "minus" to collapse the Content </h4>
<p>
Here you see the Content from "Test 1".<br>
</p>
<h4 class="EliseBox_header-collapse EliseBox_pos-left EliseBox_float-right">Test 2 (float: right): Click the "plus" to expand the Content </h4>
<p>
The Content will disappear after you click the "minus".<br>
</p>
...