Example: Sidebar with Float and Position
As you see in the Sidebar with Float Example, the Image is on the left side also with the EliseBox_float-right option.
So it will may be looks better to put the Image for the EliseBox_float-right on the right side, too.
This can be simple done with the EliseBox_pos-right command.
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.
Another 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 EliseBox_pos-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 EliseBox_pos-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>
...
<p style="clear: both"> Another Example </p>
...
<div class="EliseBox_sidebar-collapse EliseBox_hover EliseBox_float-left EliseBox_pos-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>
<div class="EliseBox_sidebar-collapse EliseBox_hover EliseBox_float-right EliseBox_pos-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>
<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>
...