I am trying to create a product summary (sidebar) like Apple's when you purchase a product. I am using Magellan and it seems to break the page at any width below 960 pxs. It may have something to do with the table. I am not sure any help or suggestions would be greatly appreciated. Like the photo below:
.
<div data-magellan-expedition="fixed">
<div class="large-2 columns right" >
<div id="top">
<h5>Summary</h5>
<h4>Business Cards</h4>
</div>
<div id="summary">
<table>
<tbody>
<tr><td>Digital</td></tr>
<tr><td>3.5 * 2</td></tr>
<tr><td>Qty: 50,000</td></tr>
<tr><td>14 Point C2S</td></tr>
<tr><td>Color Front, Empty Back</td></tr>
<tr><td>5 Business day turnaround</td></tr>
<tr><td>5 Business day turnaround</td></tr>
<tr><td>5 Business day turnaround </td></tr>
</tbody>
</table>
<h5>Your Price: $64.5</h5>
<h5> Unit Cost: $0.323</h5>
<a href="#" class="small radius success button">Get Started</a>
</div>
</div>
</div>
The one problem witch could be the table width. Try to add
#top table { width: 100%;}
As you are using F5 and it is not supporting old IE browser you can implement more HTML5 and CSS3 structure:
It is little more semantic and it have more logical outline. You can that target tags inside the #business:
Example markup to match you example:
Github gist > https://gist.github.com/anonymous/8915089
If it's not solving your problem post more informations. Like whera are the checkboxes from image and so.