Hello from totally foggy minus 2 degrees c wakefiled UK…
http://www.pauserefreshment.co.uk/hot_chocolate_machines.html
OK on the above page there is a lyout problem when viewed thru IE 6. What I see is the left hand column incorrectly postions its self below tha main content rather than hangingin to the left. Is the problem because of the following?
#main has a 985px width
#sidebar has a 218px width
#content2 has a 750px width
218px + 750px = 968px giving a surplus off 17px.
So my question is… If the left hand column is increased to 235px would this resolve the issue? Offending code is below.
Any insights welcome 
body {
margin:0;
background:url(../images/bg-body.gif) repeat-x 0 0;
font:11px Arial, Courier, Helvetica, sans-serif;
color:#712453;
min-width:985px;
}
img {
border:none;
display:block;
}
a {
color:#702453;
text-decoration:underline;
}
a:hover {
text-decoration:underline;
}
#pagewidth {
width:985px;
margin:0 auto;
overflow:hidden;
position:relative;
}
#header {
height:130px;
width:985px;
overflow:hidden;
}
#header p {
margin:0;
position:absolute;
top:13px;
left:18px;
}
#header p a {
display:block;
overflow:hidden;
text-indent:-9999px;
width:207px;
height:103px;
background:url(../images/logo_go_home.gif);
}
#header ul {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:12px;
left:244px;
}
#header ul li {
float:left;
}
#header ul li a {
display:block;
overflow:hidden;
text-indent:-9999px;
height:109px;
background-image:url(../images/text-topnav10.jpg);
background-repeat:no-repeat;
}
#header ul li a.who {
width:91px;
background-position:0 0;
margin:0 12px 0 0;
}
#header ul li a.our {
width:93px;
background-position:-91px 0;
margin:0 7px 0 0;
}
#header ul li a.happy {
width:105px;
background-position:-184px 0;
margin:0 5px 0 0;
}
#header ul li a.come {
width:103px;
background-position:-289px 0;
margin:0 9px 0 0;
}
#header ul li a.useful {
width:93px;
margin:0 14px 0 0;
background-position:-392px 0;
}
#header ul li a.on-line {
width:94px;
margin:0 13px 0 0;
background-position:-485px 0;
}
#header ul li a.show {
width:95px;
background-position:-579px 0;
}
#main {
width:985px;
overflow:hidden;
}
#content {
float:right;
width:734px;
}
#content_legal {
width:100%;
}
#content_legal p {
font-size:16px;
}
/*css amends for two column layout */
#content2 {
float:right;
width:750px;
}
#content2 .type {
font-family:"Courier New" Courier monospace;
}
#content2 img {
float:left;
padding-right:5px;
}
#content2 .callbanner {
padding-right:100%;
padding-bottom:1%;
}
#content2 p {
font-size:1.5em;
}
#content2 .pump {
font-size:16px;
padding-top:0px;
padding-bottom:0px;
margin-top:0px;
margin-bottom:0px;
font-weight:bold;
}
#content2 .pump2 {
font-size:25px;
padding-top:0px;
padding-bottom:0px;
margin-top:0px;
margin-bottom:0px;
font-weight:bold;
text-decoration: underline;
color:#D68126;
}
/*css amends for two column layout ends */
#content .left {
float:left;
width:357px;
padding:0 0 28px;
}
#content .h2 {
padding:0px;
font-size:20px;
color: #B5B43E;
}
#content .h3 {
padding:0px;
font-size:15px;
color: #B5B43E;
}
#content .call {
padding-top: 5px;
}
.home {
margin-left: 5%;
}
#content .right {
float:right;
width:349px;
padding:0 0 28px 28px;
}
/* * html #content .right {
padding:85px 0 0 28px;
} */
#content p {
margin:16px 0 0;
}
.image {
margin:0 0 0 -28px;
}
/*
Regular side bar
*/
#sidebar {
float:left;
width:218px;
padding:30px 0 0;
}
#sidebar ul {
margin:0;
padding:0;
list-style:none;
width:225px;
overflow:hidden;
}
#sidebar ul li {
width:225px;
overflow:hidden;
float:left;
margin:4px 0 0;
}
#sidebar ul li a {
width:225px;
overflow:hidden;
display:block;
text-align: right;
font:14px "Arial", Courier New, San-serif;
line-height:18px;
color: #884970;
}
#sidebar ul li.activeblue a {
background: #702453;
text-decoration: none;
color: #6ecee4;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #6ecee4;
}
#sidebar ul ul li.activeblue2 a {
text-decoration: underline;
color: #6ecee4;
}
#sidebar ul ul li a:hover {
text-decoration: underline;
color: #6ecee4;
}
#sidebar ul li.activeyellow a {
color: #fece49;
background: #702453;
text-decoration: none;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #fece49;
}
#sidebar ul li.activeyellow2 a {
text-decoration: underline;
color: #fece49;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #fece49;
}
#sidebar ul li.activeorange a {
text-decoration: none;
background: #702453;
color: #f6872d;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #f6872d;
}
#sidebar ul li.activeorange2 a {
text-decoration: underline;
color: #6ecee4;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #f6872d;
}
#sidebar ul li.activepink a {
text-decoration: none;
background: #702453;
color: #dd5762;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #dd5762;
}
#sidebar ul li.activepink2 a {
text-decoration: underline;
color: #6ecee4;
}
#sidebar ul li a:hover {
background: #702453;
text-decoration: none;
color: #dd5762;
}
.sidebar ul li a dotsblue {
color: #6ecee4;
font-weight: bold;
}
#sidebar ul li a em {
color: #fece49;
font-weight: bold;
}
#sidebar ul ul {
margin:0;
padding:6px 13px 12px 0;
list-style:none;
width:212px;
text-align:right;
line-height:18px;
border-top:1px solid #fff;
background:#f0e9ed url(../images/separator.gif) repeat-x 0 100%;
}
#sidebar ul ul li {
float:none;
width:auto;
margin:0;
}
#sidebar ul ul a {
text-indent:0;
height:auto;
width:auto;
color: #702453 !important;
display:inline;
font:12px Arial, San-serif !important;
background:none !important;
}
#sidebar ul ul a:hover {
text-decoration: underline;
}
#footer {
height: 30px;
width: 985px;
overflow:hidden;
padding: 0px 0px 0px 0px;
margin: 0px auto 0px auto;
border-top: 1px dotted #333;
}
#footer ul {
margin: 10px 0 0 240px;
padding: 0;
}
#footer ul li {
list-style: none;
float: left;
}
#footer ul li a {
display: block;
overflow:hidden;
font:10px;
line-height:18px;
color: #884970;
padding: 0px 10px 0px 10px;
border-right: 1px solid #aaa;
}
#footer ul li a:hover {
background: #702453;
text-decoration: none;
color: #fece49;
}
.sIFR-flash {
visibility:visible !important;
margin:0;
}
.sIFR-replaced {
visibility:visible !important;
}
span.sIFR-alternate {
position:absolute;
left:0;
top:0;
width:0;
height:0;
display:block;
overflow:hidden;
}
.sIFR-flash + div[adblocktab=true] {
display:none !important;
}
.sIFR-hasFlash h1 {
visibility:hidden;
letter-spacing:-5px;
font-size:45px;
margin:27px 0 -20px;
}
.sIFR-hasFlash h1 span {
padding:0 32px 0 0;
background:url(../images/dot.gif) no-repeat 100% 21px;
}
.sIFR-hasFlash h2 {
visibility:hidden;
letter-spacing:-5px;
font-size:45px;
margin:27px 0 -20px;
}
.sIFR-hasFlash h2 span {
padding:0 32px 0 0;
background:url(../images/dot.gif) no-repeat 100% 21px;
}
.sIFR-hasFlash h3 {
visibility:hidden;
letter-spacing:-5px;
font-size:45px;
margin:27px 0 -20px;
}
.sIFR-hasFlash h3 span {
padding:0 32px 0 0;
background:url(../images/dot.gif) no-repeat 100% 21px;
}
.sIFR-hasFlash h4 {
visibility:hidden;
letter-spacing:-5px;
font-size:45px;
margin:27px 0 -20px;
}
.sIFR-hasFlash h4 span {
padding:0 32px 0 0;
background:url(../images/dot.gif) no-repeat 100% 21px;
}
* .sIFR-hasFlash h1 span {
background:url(../images/dot.gif) no-repeat 100% 31px;
}
*+.sIFR-hasFlash h1 span {
background:url(../images/dot.gif) no-repeat 100% 31px;
}
* .sIFR-hasFlash h2 span {
background:url(../images/dot.gif) no-repeat 100% 31px;
}
*+.sIFR-hasFlash h2 span {
background:url(../images/dot.gif) no-repeat 100% 31px;
}
* .sIFR-hasFlash h3 span {
background:url(../images/dot.gif) no-repeat 100% 31px;
}
*+.sIFR-hasFlash h3 span {
background:url(../images/dot.gif) no-repeat 100% 31px;
}
* .sIFR-hasFlash h4 span {
background:url(../images/dot.gif) no-repeat 100% 31px;
}
*+.sIFR-hasFlash h4 span {
background:url(../images/dot.gif) no-repeat 100% 31px;
}
#content .orange {
padding-top:10px;
margin: 0;
font-size:2em;
text-decoration:none;
color:#D68126;
padding-bottom:1px;
}
#content .chrisfloat {
float:left;
padding-right:5px;
}
#content .textpump {
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
}
a:link {color: #622449; text-decoration: none}
a:visited {color: #622449; text-decoration: none}
a:hover {color: #D68126; text-decoration: underline; font-size: 100% }
#content .paddingblast {
margin-top:0;
padding-top:0;
}
#content .newslink {
margin-top:0;
padding-top:0;
color:red;
}
#content .prend {
border-top:3px solid red;
}
#content .prheadline {
font-size:15px;
}
#content .photo {
color:#B5B43E;
font-size:17px;
}
#content .papped {
font-size:17px;
color:#B5B43E;
}
#content p {
font-size:16px;
}
#content .bottompadding {
padding-bottom:5px;
}
#content2 .listboot {
font-size:17px;
font-family:Arial, Helvetica, sans-serif;
list-style-type: none;
margin-left:150px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<title>Hot chocolate machines | pause... refreshment professional hot choc machine suppliers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import "css/all.css";
</style>
</head>
<body>
<div id="pagewidth">
<div id="header">
<p> <a href="index.html"> Pause </a> </p>
<ul>
<li> <a href="whoweare.html" class="who"> who we are... </a> </li>
<li> <a href="ourrange.html" class="our"> our range... </a> </li>
<li> <a href="happycustomers.html" class="happy"> happy customers... </a> </li>
<li> <a href="talktous.html" class="come"> come & say hello... </a> </li>
<li> <a href="hotel_coffee_machines.html" class="useful"> useful things...</a> </li>
<li> <a href="office_coffee_machines.html" class="on-line"> on-line shop... </a> </li>
<li> <a href="shop_coffee_machines.html" class="show"> show you care... </a> </li>
</ul>
</div>
<div id="main">
<div id="content2">
<div class="left"><img class="callbanner" src="images/quote/number_machines2.jpg" alt="call our professional coffee machine quote line"/>
<h1>We've got office coffee machines that also do Hot Chocolate</h1>
<h2 class="pump">Our Vision 400 and flavia 400 coffee machines both serve up hot chocolate</a></h2>
<img class="" src="images/model_machine/hot_choc2.jpg" alt="Hot chocolate machine model" />
<p>Not everyone likes coffee like not everyone likes Bovril that’s why we supply coffee machines that serve up hot chocolate too. If you like the idea of getting hot chocolate at the push of a button in your office then pause recommends the <a href="flavia_creation_400.html">Flavia 400 office coffee machine</a> and the <a href="vision_coffee_machine.html">Vision 400 office coffee machine.</a></p>
<div style="clear:both"></div>
<h3 class="pump2">Our Flavia 400 coffee machine serves up Galaxy hot chocolate </a></h3>
<img src="images/model_machine/galaxy_sachet2.jpg" alt="galaxy hot chocolate flavia refill" />
<p>If you’re a fan of Galaxy chocolate bars you’re going to love the flavia galaxy refill. It’s sweet and packs a no bars hold, solid choc punch. </p>
<ul class="listboot">
<li>Pros - Tastes, looks and smells like a café standard hot chocolate. </li>
<li>Cons - Lacks that characteristic frothy topping </li>
</ul>
<p>The flavia refill “Galaxy hot chocolate” is compatible with the <strong><a href="flavia_creation_400.html">office coffee machine flavia 400</a></strong> available direct from pause… refreshment.</p>
<div style="clear:both"></div>
<h4 class="pump">Galaxy flavia refill nutritional info per 17g sachet</h4>
<img src="http://www.pauserefreshment.co.uk/images/filter/nutrition.jpg" alt="Hot choc nutritional info" width="146" height="133" />
<ul class="listboot">
<li>68 kcal / serving </li>
<li>Protein 1.6g</li>
<li>Total Fat 1.9g</li>
<li>Caffeine 0mg</li>
<li>Saturated Fat 1.5g</li>
<li>Cholesterol 1mg</li>
<li>Sodium 147mg</li>
<li>Total Carbs 11.8g</li>
<li>Diet Fibre 0g</li>
<li>Sugars 6.7g</li>
</ul>
<div style="clear:both"></div>
<h5 class="pump">Galaxy flavia refill ingredients</h5>
<img src="images/model_filter/coffee_ingredients.jpg" alt="Hot choc ingredients" />
<p>Whey powder (Milk), Fat Reduced Cocoa Powder (20%), Glucose Syrup, Sugar, Chocolate (7.5%) (Cocoa Mass, Cocoa Butter, Sugar, Milk Fat, Emulsifier (Soya Lecithin), Flavouring), Vegetable Oil, Stabilisers (Guargum, Hypromellose, E466, Carrageenan, E339, E340), Salt, Flavouring, Milk Protein, Emulsifiers (E471, E472), Anti-caking agent (Silicon Dioxide), Sweetener (Sucralose) </p>
<h6 class="pump2">Our Vision 400 coffee machine serves up ARAMARK hot chocolate </h6>
<p><img src="images/filter/mug_drinker.jpg" alt="ARAMARK hot chocolate drinker" />If you’re a fan of lighter hot chocolates the ARAMARK instant hot chocolate is for you. Whilst not packing a heavyweight choc punch like its Galaxy flavia counterpart ARAMARKs hot chocolate will win lip smacking plaudits from fans of hot chocolate with a lighter touch. Compatible with the <strong><a href="vision_coffee_machine.html">Vision 400 office coffee machine.</a></strong></p>
<ul class="listboot">
<li>Pros - Light and subtle. Great frothy topping. </li>
<li>Cons -Lacking the classic creamy texture of a café standard hot chocolate</li>
</ul>
<h6 class="pump">Nutritional info per 1kg bag of ARAMARK instant hot chocolate</h6>
<img style="padding-bottom:10px" src="http://www.pauserefreshment.co.uk/images/filter/nutrition.jpg" alt="Hot choc nutritional info" width="146" height="133" />
<ul class="listboot">
<li>65 kcal / 20g serving</li>
<li>Protein 7.4g </li>
<li>Carbohydrates 72.3g</li>
<li>Sodium 1.4g</li>
<li>Total fat 7.1g</li>
</ul>
<div style="clear:both"></div>
<h6 class="pump">ARAMARK hot chocolate ingredients </h6>
<img src="images/model_filter/coffee_ingredients.jpg" alt="Hot chocolate ingredients" />
<p>Sugar, Whey Powder, Fat reduced Cocoa Powder 9.5% Hydrogenated Vegetable Fat, Dried Glucose Syrup, Anti-Caking Agents E551, E341
Salt Lactose Milk Proteins Stabilisers E340, E452 Emulsifier E471
Flavouring Vanillin</p>
<p>ARAMARK instant hot chocolate is compatible with the office coffee machine Vision 400</p>
<h6 class="pump">How can I order a coffee machine that also offers hot chocolate ?</h6>
<p class="type"><img class="free" src="images/delivery/van.jpg" width="150" height="150" alt="professional coffee machine delivery" />To get hold of hot chocolate for your office call Suzy on <b>01924 363091</b>, eMail <a href="mailto:david@pause.co.uk;hello@pause.co.uk"><b>suzy@pause.co.uk </b></a>or if you have time fill in the form below and we'll get right back to you :-) <br />
<div style="clear:both"></div>
<p class="print"><a href="#" onclick="window.print();return false;">Print friendly version</a></p>
<form action="submitform.php" method="post" name="askusaquestion">
<input type="hidden" name="form" value="2" />
<table border="0">
<tr>
<td>*Name</td>
<td><input name="name" type="text" size="20" /></td>
</tr>
<tr>
<td>Position</td>
<td><input name="position" type="text" size="20" /></td>
</tr>
<tr>
<td>*Company</td>
<td><input name="company" type="text" size="20" /></td>
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" cols="20" rows="2"></textarea></td>
</tr>
<tr>
<td>*Postcode</td>
<td><input name="postcode" type="text" size="20" /></td>
</tr>
<tr>
<td>*Telephone</td>
<td><input name="telephone" type="text" size="20" /></td>
</tr>
<tr>
<td>*Email</td>
<td><input name="email" type="text" size="20" /></td>
</tr>
<tr>
<td>Existing customer</td>
<td><label>
<input type="radio" name="existing" value="1" id="RadioGroup1_0" />
Yes</label>
<br />
<label>
<input type="radio" name="existing" checked="checked" value="0" id="RadioGroup1_1" />
No</label>
<br />
</td>
</tr>
<tr>
<td>Customer account number</td>
<td><input name="accountnumber" type="text" size="20" /></td>
</tr>
<tr>
<td>*Nature of question</td>
<td><select name="natureofquestion" size="0">
<option>please select...</option>
<option>equipment</option>
<option>ingredients</option>
<option>pause points</option>
<option>admin</option>
<option>deliveries</option>
<option>accounts</option>
<option>my account manager</option>
<option>customer service</option>
<option>other</option>
</select></td>
</tr>
<tr>
<td>*Question </td>
<td><textarea name="question" cols="20" rows="5"></textarea></td>
</tr>
<tr>
<td>When is the best time to call you? </td>
<td><input name="calltime" type="text" size="20" /></td>
</tr>
</table>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Happy customers nav -->
<div id="sidebar">
<ul>
<li class="activeorange"> <a href="office_coffee_machines.html"> office coffee machines<span class="dotsorange">...</span> </a> <br />
</li>
<li> <a href="coffee_machine_review_flavia.html">pause office coffee service<span class="dotsorange">...</span> </a> </li>
<li> <a href="shop_coffee_machines.html">shop coffee machines<span class="dotsorange">...</span> </a> </li>
<li> <a href="hotel_coffee_machines.html">hotel coffee machines<span class="dotsorange">...</span> </a> </li>
<li> <a href="#">Office Hot Chocolate machines<span class="dotsorange">...</span> </a> </li>
</ul>
</div>
</div>
<div id="footer">
<ul>
<li><a class="special" href="index.html">Home</a></li>
<li><a class="special" href="pressreleases.html">Press</a></li>
<li><a class="product" href="largeorganisations.html">Large Organisations</a></li>
<li><a class="product" href="/pdf/large_organisations.pdf">Brochure</a></li>
<li><a class="new" href="legal.html">Legal</a></li>
<li><a class="our" href="pausepromise.html">pause promise</a></li>
<li><a class="pause" href="supportingyourworld.html">Show you care</a></li>
<li><a class="special" href="index.html">Copyright 2008 © pause</a></li>
</ul>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-4432210-1";
urchinTracker();
</script>
</body>
</html>