Shopping Cart Sub-Total

[Sweet ZouZou]

I've searched and tried to fix this on my own, but alas I need some help. The Sub-Total .lineTitle and the .totalBox will not stay on the same line.


I attached an image of my shopping cart so you don't have to hit the site.

www.sweetzouzou.com


from my stylesheet

.totalBox {
text-align: right;
padding: 0.2em;
}

.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}

from tpl_modules_order_totals.php

?>
<?php
/**
* Displays order-totals modules' output
*/
for ($i=0; $i<$size; $i++) { ?>
<div id="<?php echo str_replace('_', '', $GLOBALS[$class]->code); ?>">
<div class="lineTitle larger forward"><?php echo $GLOBALS[$class]->output[$i]['title']; ?></div>
<div class="totalBox larger forward"><?php echo $GLOBALS[$class]->output[$i]['text']; ?></div>
</div>
<br class="clearBoth" />
<?php } ?>

I hope this is an easy one ;-)
Thx Sweet

[Kim]

Divs are funny things ... if you have a couple of divs inside a div container and both the divs are floated to the right they work great as long as their total width doesn't exceed the width of the container they are in. If that happens they stack - no matter what you do.

[Sweet ZouZou]

I don't know how this worked, but I took a hint from Kim and added width to the #orderTotals, .lineTitle and .totalBox and played around with the justification and width. I moved things around 1 step at a time and finally got the .lineTitle left justified and the .totalBox right justified and they lined up. I then continued to change the width to move things closer together and ended up deleting all the width codes.


from my stylesheet

#orderTotals {
float: right;
}

.lineTitle, .amount {
float: left;
text-align: left;
padding: 0.2em;
}

.totalBox {
text-align: right;
padding: 0.2em;
margin: 0 20px 0 0;
}