The div 'box' keeps budging against the bottom of its two containing divs. Ive tried several methods to fix it, such as applying 1px of padding to both the box div, aswell as those that contain it.

Ive also tried using the '<br class="clear" />' in all sorts of places but that still doesn't seem to work!

If I remove the box div then the padding reappears, so Im guessing thats causing the problem?

HTML:

<div id="contentBgWide">
          <div id="contentWide">
            <h1>Processing</h1>
                <div class="box">
                  <p>Performing actions...</p>
                  <p>Apollyon demo project updated successfully.</p>
              </div>
            <br class="clear" /></div>

CSS:

#contentBgWide {
    width:720px;
    background:url(../image/bgCropWideBtm.gif) no-repeat 0 100%;}
    
#contentWide {
    width:690px;
    background:url(../image/bgCropWideTop.gif) no-repeat;}
    
    
.box, .boxHide {
    border:#CCC solid 1px;
    background-image:url(../image/bgStripeFaint.gif);}
    
.boxHide {
    display:none;}
    
.box p, .boxHide p {
    margin:1em;}

</div>

I'm sorry, I must be confused. Is Dreamweaver a browser?

lol no its an editor, surely you must have heard of Dreamweaver??
http://www.adobe.com/uk/products/dreamweaver/

So, I plugged in your code into a browser, and nothing seems out of place. You must not be showing us all of the code. Do you have a link to the page? (P.S. I was just being silly)

haha I did think it seemed a little strange! Here is a link to the page [just ignore all the error messages].

http://69.16.196.116/~inspin/files/m...in/process.php

Notice how there is no gap between the box div and its container.

If I understand you right, you want there to be some padding on the bottom of the div with an id="contentWide", so that there is a gap between the bottom of the box, and the edge of its container.

One way to do this, for example, is to simply add padding to #contentWide, like this:

#contentWide {
padding-bottom: 20px;
}

Or however many pixels you think is needed.

The <br class="clear" /> is not needed, and may be removed. This is a device that used to clear floats, nothing else.

Wow your absolutely right! lol I completely forgot to even add padding. I was confused about how they all looked right on other pages, but thats because they all contained paragraphs at the bottom, and its the paragraphs that are assigned the padding!

argrgghh silly me!