I'm having trouble floating elements left and right. You can see what I want to float left and right here. You can see which elements I want left and right in the header.
This is using a plugin, but still can be styled like HTML. Here is some relevant HTML:
<div id="menuHeader">
<h2>Appetizers Left</h2>
</div>
[tbl width="425" colwidth="50|50" colalign="left|right"]
Onion Rings,4.95
Fries,3.99
Nachos Supreme (small),8.95
Nachos Supreme (large),10.95
[/tbl]
<div id="menuHeader">
<h2>Fresh Salads Right</h2>
</div>
[tbl width="425" colwidth="100|50|50" colalign="left|right|right"]
,Small,Large
Garden Salad,4.95,5.99
Chef | Caesar| Greek,5.95,6.95
Add chicken for,,2.00
[/tbl]
3 Answers
You could wrap each header and associated table in a div like so and apply the floats to that container.
HTML
<div class="menu-container left">
<div id="menuHeader">
<h2>Appetizers Left</h2>
</div>
[tbl width="425" colwidth="50|50" colalign="left|right"]
Onion Rings,4.95
Fries,3.99
Nachos Supreme (small),8.95
Nachos Supreme (large),10.95
[/tbl]
</div>
<div class="menu-container right">
<div id="menuHeader">
<h2>Fresh Salads Right</h2>
</div>
[tbl width="425" colwidth="100|50|50" colalign="left|right|right"]
,Small,Large
Garden Salad,4.95,5.99
Chef | Caesar| Greek,5.95,6.95
Add chicken for,,2.00
[/tbl]
</div>
CSS
.menu-container.left { float: left; }
.menu-container.right { float: right; }
You need wrappers around your relevant sections
<div class="leftFloat">
<div id="menuHeader">
<h2>Appetizers Left</h2>
</div>
[tbl width="425" colwidth="50|50" colalign="left|right"]
Onion Rings,4.95
Fries,3.99
Nachos Supreme (small),8.95
Nachos Supreme (large),10.95
[/tbl]
</div>
<div class="rightFloat">
<div id="menuHeader">
<h2>Fresh Salads Right</h2>
</div>
[tbl width="425" colwidth="100|50|50" colalign="left|right|right"]
,Small,Large
Garden Salad,4.95,5.99
Chef | Caesar| Greek,5.95,6.95
Add chicken for,,2.00
[/tbl]
</div>
<div class="clear"></div>
The relevant styles in your css styles.
.leftFloat{ float:left; }
.rightFloat{ float:right; }
.clear{ clear:both; }
Read more about floating elements here:
You have to put all your content inside of a div and to use style="float:right/left" according that you need.
<div style="float:left">
<div id="menuHeader">
<h2>Appetizers Left</h2>
</div>
[tbl width="425" colwidth="50|50" colalign="left|right"]
Onion Rings,4.95
Fries,3.99
Nachos Supreme (small),8.95
Nachos Supreme (large),10.95
[/tbl]
</div>
<div style="float:right">
<div id="menuHeader">
<h2>Fresh Salads Right</h2>
</div>
[tbl width="425" colwidth="100|50|50" colalign="left|right|right"]
,Small,Large
Garden Salad,4.95,5.99
Chef | Caesar| Greek,5.95,6.95
Add chicken for,,2.00
[/tbl]
</div>
