A DIV height issue (with example)

Well, what do you suggest instead?

The idea is the same, but mine is a bit more complicated. Here is the actual code (a bit modified so it works). Notice that the wrap have a black background set but the background never becomes black all the way down.

<style>
DIV.wrapmiddle { BACKGROUND-COLOR: #000000}
</style>

<div class="wrapmiddle">
    <div style="WIDTH: 25px; FLOAT: left"> </div> <!-- Empty space border //-->
    <div class="middlemargin" style="FLOAT: left; WIDTH: 160px;">
        
        Margin<br />
        asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
        
    </div>
    <div style="WIDTH: 7px; FLOAT: left;"> </div> <!-- Empty space border //-->
    
    <div style="WIDTH: 699px; FLOAT: left; BACKGROUND-COLOR: green;">
        
        <div style="BACKGROUND-IMAGE: url('/images/layout/conwin-brd_top.gif'); HEIGHT: 7px; BACKGROUND-COLOR: #FFFFFF; BACKGROUND-POSITION: top left; BACKGROUND-REPEAT: no-repeat; FONT-SIZE: 0px"></div>
        <div>
            <div style="FLOAT: left; WIDTH: 6px;"> </div> <!-- Empty space border //-->
            <div style="FLOAT: left">
            
            Content
            asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
            
            </div>
            <div style="FLOAT: left; WIDTH: 6px"> </div> <!-- Empty space border //-->
        </div>
        <div style="BACKGROUND-IMAGE: url('/images/layout/conwin-brd_bottom.gif'); HEIGHT: 7px; BACKGROUND-POSITION: bottom left; BACKGROUND-REPEAT: no-repeat; FONT-SIZE: 0px; CLEAR: both;"></div>
        </div>
    </div>
    <div style="WIDTH: 25px; FLOAT: left"> </div>
    <div style="CLEAR: both"></div>
</div>

Example of how this looks:
http://www.garaget.org/temp/asdf.html (Without any images)

The reason you are not getting the black background is that you have a clossing </div> that shouldn't be there. It's 5 lines from the bottom.

This should be easy to do but I can't quite see what you want the final result to be. Do you just want two boxes floating on a black background with a black border around everything and some space between the boxes?

OK. Give me a few minutes.

EDIT: is the whole layout supposed to be fixed width, if so how wide.

What about this
http://www.post21.co.uk/files/ctest.html

Tested in IE6, Opera 7, Firefox, Mozilla. Identical in all of them. Even seems to work reasonably well in IE5.

Thats because you looked at the file while I was in the middle of tidying it up. I've altered it slightly to put the width on an extra outer div so internal padding and margins can be set without screwing up the overall width.

I've got to be honest, if it were me I would put the content area in a 3 column 1 row table styled with css. You get a solid framework which won't cause any problems and will use less markup than the the alternatives. To get the tableless solutions to work cross browser could be a major problem. In particular, if you drop PunBB into the middle of what I proposed or what you tried it won't work.

In that case, cheat, use faux columns i.e. change you background graphic so the central part of it is white instead of black and that will create a full height white content area. Basically you are just positioning your divs on top of a colour mask. There is nothing to loose since you are using a background graphic anyway.

Well the text book that is usually cited as the bible of modern design in Zeldmans "Designing with web standards". Interestingly the example worked through in that book is a design which uses a simple table to give structure. Even the geeks seem to recognise that in the real world the thing has got to work.