Dreamweaver Placement Issue

Question

I'm working on building myself a nifty little website using HTML and CSS.  Frankly, I don't think it's too fancy... but I seem to be having an alignment problem when using the WYSIWYG browser in Dreamweaver CS3.
I've tested the code and it works fine across all browsers (except Netscape 9... but that's another story).  I have a header, a main body section, and then a footer.  The header is independent from the rest, but the main and the footer share a common DIV.
I've set up the code so that the content in the main section pushes the footer section down, leaving the footer always at the bottom of the page (although, not a sticky footer).
I think because I've made the main section with <height:100% min-height:500px;> type instructions, Dreamweaver is having trouble placing the footer.  In the WYSIWYG editor, it shows the header properly placed and the main content under it.  But it floats (literally, not code wise) the footer on top of everything at the top of the editor.  In fact, part of it (a border that juts into the main section using positioning) is completely off the top of the screen!
So my question is, how do I get Dreamweaver's editor to make it look correct in WYSIWYG mode?  This is nothing but for my own benefit, and to figure out what's going on, and why it's acting so awkward.  Is it simply that Dreamweaver can't process the "min-height"?  Or is it something to do with how it figures positioning?
Me = Confused.
(PS- I can post my code here if you think it will help... but my site isn't live yet, and a host hasn't been purchased... so I don't have any links to demonstrate the problem with yet.)

Answer 1

I have this problem all the time. Mostly I just live with it. Dreamweaver does not do a great job of rendering layout css.
Very likely you can fix it by putting in a clear: both.
Depending on how you have things set up, you may need to do it one of several ways:
#footer {
clear:both;
May work, or you might need to add another div inside whatever is above the footer like so:
<div id="main-content">
   <div id="something that has a float"> floated content </div>
   <div class="something else that has a float"> floated content  </div>
   <div style="clear: both; height: 1px;"> </div>
</div>
<div id="footer"> footer content </div>
Or possibly:
<div id="main-content">
   <div  id="something that has a float"> floated content </div>
    <div class="something else that has a float"> floated content  </div>
</div>
<div style="clear: both;  height: 1px;"> </div>
<div  id="footer"> footer content </div>
OR you may need to add overflow: hidden, position relative or some such, though these are usually only needed when it is also need for proper rendering in one or another actual browser. Usually, for an exampl;e like the above, it would be:
#main-content {overflow: hidden;}