Hi all,
        I came across a simple layout tutorial @ http://www.vanseodesign.com/blog/css/2-column-css-layout/ which I found very useful and started to play with the code. I’m have altered it to whats below and have a margin/padding issue between the content-wrap and main divs left side in IE7 and not in FF3. Would really like to know whats going on and a W3C valid fix if there is! If anyone has other browsers and it’s showing differently I’d like to know as well.

Thanks
Denis

well, it looks awful in IE6 :)

first.. let’s fix the IE6 like that:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

IE puts padding so that’s the way to remove it. Also IE6 doesnt fill the whole browser width/height sometimes.. so it’s better to put width/height: 100% to eliminate that problem.

the div#header doesn’t needs the width:100% cause the default display type for a div is a “block” element so it fills the whole width.
same thing with div#content-wrap - no need for the set width, besides, you’ve set it wrong.. the wrapper is 800px, so if the content-wrap will be bordered it meats that it’s 798px ( cause borders count additionally ) so 798 + 1px left border + 1px right border = 800px

_height: 500px; is a hack.. I doubt it is w3c valid. Better use * html for setting min-width/min-height for IE 6/7 like:
* html div#main { //will be executed only for IE 6
  height: 500px;
}

*+html div#main { //will be executed only for IE 7
// IE 7 supports min-width/height so in this case we do not need this..
}

and you should not miss the float: left in this one - do float all elements - it’s easier
for the footer: again, no need of the width and as our previous divs are floated we need to put clear: both, so that the footer will begin just after the both of them - not after the shorter one..

and to fix the content-wrap “bug” caused of the floated divs, it’s good to put an extra div inside. I do the following:
.clear {
  clear: both;
}

so hte HTML becomes:

<div id=“content-wrap”>
  <div id=“sidebar”></div>
  <div id=“main”></div>
  <div class=“clear”></div>
</div>

and you’re all set up :)
haven’t tested it in IE 7, but the floated elements render almost everywhere the same way so it shouldn;t be any different in IE7… but.. if you’re using margin for floated elements, keep in mind that IE 6 doubles it - i.e. if you have float: left; margin-left: 10px; in IE6 you’ll have 20px margin from the left ( easily fixable with the * html filter )

Regards, SteeleR