The first step would be to remove a couple CSS styles from #Map_Copy:

remove:
left: 418px;
top :339px;
position: absolute;

and you'll need to adjust the margin on this line:

<div id="Call_us" style="margin: 250px 0px 0pt;">

After glancing through the HTML, it seems like you have a huge amount of unnecessary <div>s and <span>s littering your file. The spans look like they are generated by using the WYSIWYG features of Dreamweaver, rather than hand coding. I'm not sure what all of the extra divs are from.

For example, this:

<table cellspacing="0" cellpadding="0" id="Centre_Background" class="bot-k">
              <tbody><tr>
                <td height="320" style="padding-bottom: 16px;" class="bot-k2"><p><br/>
                </p>
                          <div class="style18">
                            <div align="center" id="Map_Copy" class="h_text style2"><span class="style21">Experts in <br/>
                              US Inbound <br/>
                              and Outbound <br/>
                              Freight and Clearance</span><br/>
                              <img border="0" height="115" width="190" style="margin-left: 0px; margin-top: 25px;" id="Map" name="Map" alt="" src="images/1-p1.jpg"/><br/>
                            </div>
                          </div>
                        <div id="Mid_Bot">
                          <div id="Call_us">
                            <div style="margin: 0pt 0px;" id="Call_us">
                                <div align="left">
                                  <p align="center"><span class="l_text fs style7 style8"><span class="fs style7 style9"><span class="style2 fs"><strong><span class="fs style24">Call us for a Quote</span></strong></span></span></span></p>
                                  <p align="center"><span class="style7 fs l_text"><strong><span class="fs style7">905-470-0001</span></strong></span><br/>
                                  </p>
</div>
                            </div>
                          </div>
                        </div>
                  </td>
              </tr>
            </tbody></table>

Could easily be this (with some significant changes to the CSS, of course):

<div class="col-top">&nbsp;</div>
<div class="col-middle">

    <p>Experts in <br/>
    US Inbound <br/>
    and Outbound <br/>
    Freight and Clearance</p>
    
    <img border="0" height="115" width="190" alt="" src="images/1-p1.jpg"/>
    
    <p>
        <span class="call">Call us for a Quote</span>
        <span class="phone">905-470-0001</span>
    </p>
    
</div>
<div class="col-bottom">&nbsp;</div>

I'm just saying that Dreamweaver doesn't create perfect websites. When you use its WYSIWYG features (basically, creating the site in the Design view, rather than coding it in the code view) it often creates unnecessary divs and span tags. This is a common problem with basically all WYSIWYG tools. If you actually understand the code, and can hand code the site, you can bypass this issue.

"Is there a way of getting rid of these unneeded divs without having to change everything?"
No, not really. Realistically, probably these extra tags won't be a problem with the page displays, but realize that a lot of the code in the page is probably unnecessary, and may cause challenges if someone else tries to go in and make changes.

the shipping page is much worse.

Hi Benjamin,

I tried what you mentioned. I took out the height and it got worse.

I have a design background but this web stuff frustrates the crap out of me.

So is there no way of putting in a figure that you want the length of the box to be and it being that length?

I have tried 250 & 0 and it still does not work. Very frustrated.

The worst part is that when I preview them, they look perfect.

Last edited by oggyswain (September 9, 2009 6:52 am)

OK I believe I am getting there. I think the problem I am having all has to do with CSS set to effect all pages. How can I get the CSS to effect the columns separately.

If you look at the page now http://www.postmarkinternational.com/Shipping.html

It looks much better but the changes I have made have effected the rest of the pages as well. How do I make CSS apply seperate column heights to separate pages?