Example: Sidebar with Float
To use the full potential of ByRei EliseBox you should use the Float Option for the Sidebars.
So you make sure that the sidebars are only take the space, they needed.
You can set the Float and the Float Direction with EliseBox_float-left or EliseBox_float-right.
The script will automatic choose the right images, but you can also use EliseBox_pos-... to set the image on the right or the left side of the sidebar.
Live Example
Some other Content like the Webpage Content or other Informations.
You should set a "height" and a "width" for the DIV to avoid that the DIV is to bigger in some Browser.
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>
<div class="EliseBox_sidebar-collapse EliseBox_hover EliseBox_float-left">
<div style="padding: 5px; border: 1px solid #ccc; background-color: #eee; height: 150px; width: 250px;">
It is the beginning of an example.<br>
<br>
This is a small Content.<br>
<br>
And this is the end my friend of this Content.<br>
</div>
</div>
<div class="EliseBox_sidebar-collapse EliseBox_hover EliseBox_float-right">
<div style="padding: 5px; border: 1px solid #ccc; background-color: #eee; height: 150px; width: 250px;">
It is the beginning of an example.<br>
<br>
This is a small Content.<br>
<br>
And this is the end my friend of this Content.<br>
</div>
</div>
<p style="padding: 25px;">
Some other Content like the Webpage Content or other Informations.<br>
You should set a "height" and a "width" for the DIV to avoid that the DIV is to bigger in some Browser.<br>
</p>
...